HTML5视频标签的播放方法 html5 视频标签

转载

落笔成诗 2024-01-03 11:22:36

文章标签 HTML5视频标签的播放方法 html5 前端 ide 视频播放 文章分类 HTML5 移动开发

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>

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