HTML5视频标签＜video＞ - Kaiqisan

HTML5视频标签

顾名思义，就是在插入这个标签之后就可以在网页里面在线播放视频了。它是HTML5的新属性，是为了让页面内容更加丰富，是适应新时代需求的一项重要内容（在这里吐槽一句：前端的各种内容，不论是js编程语言还是框架，工具包，前端相关的插件，它们的更新换代是真的快）。

关键代码

<video controls="controls" width="1400" height="800" class="video" poster="./imgs/otome1.png" preload="auto">
	<source src="./video/yuki.mp4" type="video/mp4" />
	对不起，您的破浏览器不支持我们的视频播放模块
</video>

上图是一个标准的一个视频标签，下面就来讲讲该标签的所有属性吧（除开所有标签都有的公共属性）

controls: 是否使用浏览器原生的播放器控件，如果您有自己的想法的话可以不使用原生控件。（但是有一说一，谷歌浏览器的原生播放器控件还挺好使的）

<video controls="controls">
	<source src="./video/yuki.mp4" type="video/mp4" />
	对不起，您的破浏览器不支持我们的视频播放模块
</video>

<video controls>
	<source src="./video/yuki.mp4" type="video/mp4" />
	对不起，您的破浏览器不支持我们的视频播放模块
</video>

autoplay: 是否立马在视频资源加载完成之后马上播放。

<video autoplay="autoplay">
	<source src="./video/yuki.mp4" type="video/mp4" />
	对不起，您的破浏览器不支持我们的视频播放模块
</video>

<video autoplay>
	<source src="./video/yuki.mp4" type="video/mp4" />
	对不起，您的破浏览器不支持我们的视频播放模块
</video>

width:设定播放器的宽度

height: 设置播放器的高度

<video width="1400" height="800">
	<source src="./video/yuki.mp4" type="video/mp4" />
	对不起，您的破浏览器不支持我们的视频播放模块
</video>

loop: 是否在视频播放完成之后再重头开始播放

<video loop="loop">
	<source src="./video/yuki.mp4" type="video/mp4" />
	对不起，您的破浏览器不支持我们的视频播放模块
</video>

<video loop>
	<source src="./video/yuki.mp4" type="video/mp4" />
	对不起，您的破浏览器不支持我们的视频播放模块
</video>

muted: 是否在进入页面的时候设定为静音。

<video muted="muted">
	<source src="./video/yuki.mp4" type="video/mp4" />
	对不起，您的破浏览器不支持我们的视频播放模块
</video>

<video muted>
	<source src="./video/yuki.mp4" type="video/mp4" />
	对不起，您的破浏览器不支持我们的视频播放模块
</video>

poster: 视频的封面，在播放之前最先显示的内容，点击播放按钮之后消失。如果您选定了autoplay的话，先加载封面，在视频就绪之后，封面马上消失，开始播放视频。

<video poster="./imgs/otome.png"> <!-- 所有的文件路径自己定啊！ -->
	<source src="./video/yuki.mp4" type="video/mp4" />
	对不起，您的破浏览器不支持我们的视频播放模块
</video>

preload: 决定是否在页面载入之后加载视频内容，如果使用 “autoplay”，则忽略该属性。它有三个属性值。

• none: 不自动加载音频
• metadata: 不自动加载音频，但要获取音频的一些基本信息–音频时长，音频大小等等。
• auto: 马上加载音频信息,一般在h5小游戏或者在和用户交互紧密的一些页面里面适合使用

给大伙举个例子就有既视感了，您如果使用手机在一般的视频网站里面看视频的话，如果您使用流量观看的话，它会先弹出----是否使用流量观看，本视频大小 xxxmb,这个就是metadata，预加载元数据，如果您使用的是wifi的话，它就会自动加载视频的内容，那就是auto，通过预加载，能尽可能减少用户缓存的时间和概率，从整体上提高用户体验。

（这个功能在用户的网络状况绝对好和绝对烂的情况下是没有作用的（狗头）。我说的你们都能懂吧？！）。

<source>: 源文件标签，它应该插入 video 标签里面。里面可以插入多个不同格式的资源，它可以用来兼容不同浏览器。

<video poster="./imgs/otome.png"> <!-- 所有的文件路径自己定啊！ -->
	<source src="./video/yuki.mp4" type="video/mp4" />
    <source src="./video/yuki.ogg" type="video/ogg" />
	对不起，您的破浏览器不支持我们的视频播放模块
</video>

下图为目前主流浏览器的一些兼容情况

音频格式|浏览器	Chrome	Firefox	IE9	Opera	Safari
OGG	√	×	√	×	√
MP4	√	√	×	√	×
WebM	√	√	×	√	×

总结

想要在一个网页里插入视频资源很简单，但是，定制一个自己的播放器却困难重重，它需要考虑重重因素，还需要对排版有很大的要求，所以，在播放器这方面，需要费很大的功夫，要不然，目前的一些主流视频网站为什么要隔三差五地对播放器的排版做出改动呢？还不是用户的体验是第一嘛！

还有一个需要强调的点就是，视频标签不应该胡乱插入页面，它是很好使，但使用起来应有个度，用户会对莫名其妙出现的视频产生极大的反感情绪。

/立个fiag，这一行将变成一个网站，以后会自己定制一个视频播放器，页面全部自己人工排版。