视频标签的使用

视频标签包含几个属性，如src、海报、预加载、自动播放、循环、控件、宽度、高度和内部标签源。视频标签不仅可以包含源标签，还可以包含指定视频无法播放时返回的内容。

(1) src属性和海报属性

你可以想象src属性是用来做什么的。与img标签一样，该属性用于指定视频的地址。并且海报属性用于指定当当前视频数据无效时要显示的图片(预览图片)。视频数据无效。可能是视频正在加载，视频地址错误等等。

一个

2

视频宽度='658 '

height=' 444 ' src=' http://www . you name.com/images/first . MP4 '海报=' http://www . you name.com/images/first . png ' autoplay=' autoplay '/video

(2)预加载属性

该属性也可以按名称使用。此属性用于定义视频是否已预加载。该属性有三个可选值：无、元数据和自动。如果不使用该属性，则默认为自动。

一个

2

视频宽度='658 '

height=' 444 ' src=' http://www . you name.com/images/first . MP4 '海报=' http://www . you name.com/images/first . png ' autoplay=' autoplay ' preload=' none '/video

无：不要预加载。使用这个属性值，页面制作者可能会认为用户并不期待这个视频，或者减少HTTP请求。

元数据：部分预加载。使用这个属性值意味着页面制作者认为用户并不期待这个视频，而是提供了一些元数据(包括大小、帧、曲目列表、时长等。)对于用户来说。

自动：全部预加载。

(推荐教程：html入门教程)

(3)自动播放属性

也是知道名字用途的属性。自动播放属性用于设置视频是否自动播放，为布尔属性。出现时表示自动播放，去掉则表示不自动播放。

一个

2

视频宽度='658 '

height=' 444 ' src=' http://www . you name.com/images/first . MP4 '海报=' http://www . you name.com/images/first . png ' autoplay=' autoplay ' preload=' none '/video

请注意，HTML中的布尔属性值不是真或假。正确的用法是在标记中使用这个属性来表示真。此时属性要么没有值，要么其值始终等于他的名字(此处自动播放为视频自动播放/或视频自动播放=“自动播放”/)；在标签中，此属性不用于指示false(它不会自动作为视频播放/此处)。

(4)循环属性

一个

2

视频宽度='658 '

height=' 444 ' src=' http://www . you name.com/images/first . MP4 '海报=' http://www . you name.com/images/first . png ' autoplay=' autoplay ' loop=' loop '/video

循环属性一目了然，用于指定视频是否循环播放，也是布尔属性。

(5)控件属性

一个

2

视频宽度='658 '

height=' 444 ' src=' http://www . you name.com/images/first . MP4 '海报=' http://www . you name.com/images/first . png ' autoplay=' autoplay ' preload=' none ' controls=' controls '/video

“控件”属性用于向浏览器指示页面生成器没有使用脚本来生成回放控制器，并且需要浏览器启用其自己的回放控制栏。

控制条必须包括回放暂停控制、回放进度控制、音量控制等等。

每个浏览器的默认播放控制条在界面上是不同的。因为我的浏览器出现了奇怪的问题，火狐和Safari的视频标签都不正常，所以这两个只能在网上找截图。

(6)宽度属性和高度属性

属于标签的一般属性，不用说了。

(7)源标签

一个

2

三

四

视频宽度='658 '

height='444 '海报=' http://www . you name.com/images/first . png ' autoplay=' autoplay ' preload=' none ' controls=' controls ' source src=' http://www . you name.com/images/first . ogv '

/source src=' http://www . you name.com/images/first . ogg '

//视频

源标签用于为媒体分配多个可选择的文件地址(因为音频标签也可以包含此标签，所以此处使用媒体而不是视频)，并且只能在媒体标签中未使用src属性时使用。

浏览器检测标签指定的视频是否可以按照源标签的顺序播放(视频格式可能不支持，视频不存在等)。)，如果不能播放就换下一个。这种方法主要用于兼容不同的浏览器。源标签本身没有任何意义，不能单独出现。

这个标签包含三个属性：src、类型和媒体。

Src属性：用于指定媒体的地址，与视频标签相同。

类型属性：用于指示src属性指定的媒体类型，帮助浏览器在获取媒体前判断是否支持该类型的媒体格式。

媒体属性：用于描述媒体在哪个媒体中使用；如果未设置，默认值为“全部”,表示支持所有媒体。你想过风格标签的媒介属性吗？一样，一样，一样。

(8)完整的例子

一个

2

三

四

视频宽度='658 '

height='444 '海报=' http://www . you name.com/images/first . png ' autoplay=' autoplay ' preload=' none ' controls=' controls ' source src=' http://www . you name.com/images/first . ogv '

/source src=' http://www . you name.com/images/first . ogg '

//视频

这段代码在页面中定义了一个视频。这个视频的预览是海报的属性值，显示浏览器默认的媒体控制条，预加载视频的元数据，循环播放，宽度900像素，高度240像素。

个选择的视频地址为个源标签的src属性值，视频类别为Ogg视频，视频编解码器为Theora，音频编解码器为Vorbis，播放媒介为显示器；第二个选定的视频地址不再重复。如果想和IE兼容，可以在最后一个源码标签后面加上Flash player的标签集，或者用一点JavaScript代码。

本文转载自中文网站