技术标签： css html5 Millia's work html
一段简单的 HTML5 视频：
<video src="video.mp4" controls="controls">
您的浏览器不支持 video 标签。
</video>| 性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | muted | 规定视频的音频输出应该被静音。 |
| poster | URL | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
<video
id="video"
src="video.mp4" /*视频地址*/
controls = "true" /*是否显示播放控件*/
poster="images.jpg" /*视频封面*/
preload="auto" /*预加载*/
webkit-playsinline="true" /*IOS中让视频在小窗内播放而不是全屏播放*/
playsinline="true" /*IOS微信浏览器支持小窗内播放*/
x-webkit-airplay="allow" /*是否支持ios的AirPlay功能*/
x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
x5-video-player-fullscreen="true" /*设置为true防止横屏*/
x5-video-orientation="portraint" /*播放器的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
style="object-fit:fill">
</video>src：视频的地址
controls：允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
poster：视频封面，果未设置该属性，则使用视频的第一帧来代替。
preload：在页面加载后载入视频。
webkit-playsinline和playsinline：视频播放时局域播放，不脱离文档流
x-webkit-airplay="allow": 是否支持ios的AirPlay功能。使用AirPlay可以直接从使用iOS的设备上的不同位置播放视频、音乐和图片文件
x5-video-player-type：启用同层H5播放器（沉浸式播放）WeChat安卓版特有的属性。播放时全屏，但是除去了control和微信的导航栏，只留下"X"和"<"两键。
x5-video-orientation：声明播放器支持的方向，可选值landscape横屏, portraint竖屏。默认值portraint。这个属性需要x5-video-player-type开启H5模式
x5-video-player-fullscreen：全屏设置。属性值：ture和false
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
object-position 属性一般与 object-fit一起使用，用来设置元素的位置。
object-fit: fill|contain|cover|scale-down|none|initial|inherit;| 值 | 描述 |
|---|---|
| fill | 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 |
| contain | 保持原有尺寸比例。内容被缩放。 |
| cover | 保持原有尺寸比例。但部分内容可能被剪切。 |
| none | 保留原有元素内容的长度和宽度，也就是说内容不会被重置。 |
| scale-down | 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。 |
| initial | 设置为默认值 |
| inherit | 从该元素的父元素继承属性。 |
object-position: position|initial|inherit;| 值 | 描述 |
|---|---|
| position | 指定 image 或 video 在容器中的位置。第一个值为 x 坐标位置的值，第二个值为 y 坐标位置的值。表示的方式有： |
| initial | 设置为默认值 |
| inherit | 从该元素的父元素继承属性。 |
文章浏览阅读737次。通过网盘直链程序AList，挂载网络硬盘_alist挂载smb局域网的磁盘
文章浏览阅读1.4k次。卷积神经网络Lenet-5实现原文地址：http://blog.csdn.net/hjimce/article/details/47323463作者：hjimce卷积神经网络算法是n年前就有的算法，只是近年来因为深度学习相关算法为多层网络的训练提供了新方法，然后现在电脑的计算能力已非当年的那种计算水平，同时..._迭代次数 lenet-5
文章浏览阅读1w次，点赞7次，收藏13次。Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。可查看RFC2045～RFC2049，上面有MIME的详细规范。 Base64编码是从二进制到字符的过程，可用于在HTTP环境下传递较长的标识信息。例如，在Java Persistence系统Hibernate中，就采用了Base64来将一个较长的唯一标识符（一般为..._c# 图片base64
文章浏览阅读1.9k次。import AutoResponsive from "autoresponsive-react"; componentDidMount() { this.setState({ containerWidth: (document.body.clientWidth || document.documentElement.clientWidth) - 3..._autoresponsive
文章浏览阅读3.1w次，点赞6次，收藏11次。记录一个奇怪的IDEA错误：编辑时一直报错，显示找不到引用的红色字体。我的情况：通过Maven来引用jar包，如Spring Boot。 External Libraries中明明能看到被引用的包，但是在编辑时却一直是表明引用不存在的红色字体（如@SpringBootApplication这个注解都找不到，提示：Cannot resolve symbol 'SpringBootAppli..._idea springboot 编译找不到jar包类
文章浏览阅读2.7k次，点赞4次，收藏22次。HashMapHashMap实际上是一个“链表散列”的数据结构，即数组和链表的结合体。HashMap的底层结构是一个数组，数组中的每一项是一条链表 HashMap的实例有两个参数影响其性能：“初始容量”和“装填因子” HashMap实现不同步，线程不安全，HashTable的线程安全 HashMap中的key-value都是存储在Entry中的 HashMap可以存null键和null值..._hashmap中每一个槽位是带有链表信息么
文章浏览阅读135次。尚学堂的教学质量怎么样，说实在的，让我叹服，来尚学堂参加培训是对的，在这里我进步的非常快。如今我入职了，进入了一家让我感激的公司。为什么让我感激，因为让我去复试，我傻子似的居然没去，幸好公司又给了我一个机会。所以，我得在这家好好干，Fighting！ 说实在的，我是转行过来学java的。本来...
文章浏览阅读145次。问题描述：1. 数据库实例突然crash，原因是ASMB有200多秒没有响应：Mon Sep 04 15:07:47 2017 WARNING: ASMB has not responded for 200 seconds <<<<<<<<<<<2. 从system state dump上看，ASMB看起来没有什么问题：Curren..._oracle安装第二天不见了
文章浏览阅读348次。我是如何通过一个 XSS 探测搜狐内网扫描内网并且蠕动前台到最后被发现的！(附带各种 POC) | WooYun-2014-76685 | WooYun.orghttp://wooyun.org/bugs/wooyun-2014-076685传送门： 文章很精彩转载于:https://www.cnblogs.com/dongchi/p/4073410.html..._利用xss进行内网探测
文章浏览阅读1w次，点赞112次，收藏165次。随着计算机网络的不断渗透，人们的生活与工作、学习的方式也在慢慢发生变化。传统的大学生兼职信息系统相关信息管理方式一般都采取人工的方式，信息的获取、整理、修改、存储等工作还停留在人工阶段。这种方式一方面需要花费大量的人力、物力和金钱，交互起来比较困难，而且会浪费时间；另一方面对用户等信息的管理，特别是随着用户数量的递增，查询、修改起来特别困难；最后由于用户等其他信息的不断增加，信息的存储也成为了难题。一些发达国家，网络发展比较快，已经很大程度上完成了从人工到计算机管理的转变。_springmvc的互联网招聘求职系统
文章浏览阅读3.2w次，点赞106次，收藏708次。进制转换非常简单，但又非常重要，在初学过程中是必须掌握的基础知识_c语言进制转换
文章浏览阅读1.1k次，点赞2次，收藏7次。博主本人在学习前端入门初期时做的总结及笔记（三）适合前端初学者。希望多多交流讨论~~~_html里的css里的step