织梦模板代理加盟 2020全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

您现在的位置: 麦站网 > 站长学院 > 编程语言 >

HTML5:video标签代码写法及使用方法

来源:本站原创 发布时间:2020-10-08 09:56:29热度:我要评论(0

阿里云云产品优惠

html元素<video>标签是html5中新增的标签,用于定义网页文档中的视频资源文件,有关<video>标签的使用方法及作用详解如下:

<video>标签的定义

<video>标签可以把指定的视频资源文件插入页面中播放;

<video> 标签是 HTML 5 中新增的标签。

<video>标签语法:

<video  width="高度"  height="宽度"   src="视频资源URL地址"> 提示文本 </video>

<video>标签可以设置播放视频的高度和宽度,默认单位是px,而src属性用来指定视频资源的URL地址;

在<video>和</video>之间的“提示文本”,是用于当前浏览器不支持<video>标签时显示的文本内容;

 

<video>标签支持的视频格式

目前,<video>标签支持以下三种视频格式:

 1、Ogg格式:带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件。

 2、MP4格式:带有 H.264 视频编码和 AAC 音频编码的 MPEG-4 文件。

 3、WebM格式:带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。

 

<video>标签属性

 

属性 描述
src url 要播放的视频 URL地址。
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
width pixels 设置视频播放器的宽度。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 如果出现该属性,视频的音频输出为静音。
autobuffer autobuffer 设置视频缓冲
poster URL 规定视频正在下载时显示的图像,直到用户点击播放按钮。
preload auto
metadata
none

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

auto - 当页面加载后载入整个视频;

meta - 当页面加载后只载入元数据;

none - 当页面加载后不载入视频;

 

 

<video>标签用法

1. 检测浏览器是否支持<video>标签

<video>标签和<audio>标签一样,都可以放置提示文本“当前浏览器不支持video标签”,演示代码如下:

<video  width="600"  height="325"  src="shipin.mp4">当前浏览器不支持video标签</video>

如果当前浏览器不支持<video>标签,就会显示提示文本“当前浏览器不支持video标签”,如果没有显示提示本文,则是支持的。

 

2、<video>标签属性设置

<video>标签的属性用法基本上和<audio>标签的属性用法一样,但<video>标签可以设置高度和宽度,以及设置视频封面的poster属性

 

A、设置视频资源宽度和高度

在<video>标签中,我们可以设置播放视频的高度和宽度,演示代码如下:

<video  width="600"  height="325"  src="shipin.mp4" >当前浏览器不支持video标签 </video>

width="600"是设置宽度为600px,height="325"是设置高度为325px,高宽尺寸的单位默认是px,单位还可以设置成cm、em、pt、%(百分比)等;

 

B、设置视频封面;

视频封面,就是视频还没有播放时显示的图片

<video src="视频地址" poster="视频封面图片地址">当前浏览器不支持video标签</video>

C、设置自动播放视频

Markup

<video src="视频地址" autoplay="autoplay" >当前浏览器不支持video标签</video>

D、设置有播放、暂停、音量控件的视频

Markup

<video src="视频地址"  controls="controls">当前浏览器不支持video标签</video>

E、设置视频循环播放

Markup

<video src="视频地址"  loop="loop">当前浏览器不支持video标签</video>

F、设置视频自动缓冲

Markup

<video src="视频地址" autobuffer="autobuffer">当前浏览器不支持video标签</video>

注意:如果使用了autoplay属性的话,那么,autobuffer属性将会失效。 

 

G、多个<video> 标签属性配合使用

我们可以在<video> 标签内,同时使用多个属性,比如,设置视频可以自动循环播放的同时,还带有控制视频暂停/播放的控件,演示代码如下:

 

Markup

< video src="视频地址" autoplay="autoplay"  controls="controls" loop="loop" >当前浏览器不支持video标签</video>

3、使用<source>标签设置多个视频资源

我们可以在<video>标签内放入多个<source> 标签, 就可以链接多个不同的视频资源文件,浏览器将根据<source>标签的先后顺序进行判断,优先选择最先支持的视频格式。

<video controls>

 <source src="shipin.webm" type="video/webm">

 <source src="shipin.ogg" type="video/ogg"> 

 <source src="shipin.mp4" type="video/mp4">

当前浏览器不支持 video 标签 

</video>

在<video>标签内使用<source> 标签插入相同视频的多个不同格式,这样就可以让不同的浏览器自动判断选择自己支持的视频格式,判断顺序是按照从上到下的顺序,直到浏览器选择自己支持的播放格式为止!

 

4、使用<track> 标签设置带有字幕的视频

下面,设置一个带有两个字幕轨道的视频,演示代码如下:

 

<video width="320" height="240" controls="controls">

   <source src="shipin.mp4" type="video/mp4" />

   <source src="shipin.ogg" type="video/ogg" />

   <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">

   <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">

 </video>

 

<track> 标签可以为<video>标签之类的媒体资源规定字幕文件,或其他的外部文本文件,当媒体资源播放时,这些文本是可见的。

 

一个video标签可以包含多个<track>标签 。

相关连接:<track> 标签的用法及作用    

 

5、video标签的浏览器兼容性问题

不同的浏览器可能支持的视频格式有所不同,但为了兼容更加的广泛,我们可以参看下面的代码实现更加优良的兼容性:

<video>

<!--如果浏览器支持video,也支持H.264,用movie.mp4-->

<source src="movie.mp4">

<!--如果浏览器支持video,仅支持Ogg,用movie.ogv-->

<source src="movie.ogg">

<!--如果浏览器不支持video,尝试Flash-->

<object data="videoplayer.swf" type="application/x-shockwave-flash">

<param name="movie" value="movie.swf"/>

</object>

<!--如果浏览器不支持video,也不支持Flash,给出下载链接-->

<a href="下载链接">当前浏览器不支持video标签,你可以下载该视频</a>

</video>

以上代码仅供参考学习,随着html5应用越来越成熟,浏览器对video标签的兼容性也会越来越好,但为了照顾更早版本的浏览器,也有必要考虑尽量能兼容以前的版本!

转载请注明来源网址:https://www.xiuzhanwang.com/bcyy/2730.html

    发表评论

    评论列表(条)