HTML5视频(视频)视频) )。
为了更好地展示内容,很多网站都使用视频,HTML5为展示视频提供了标准。
确定您的浏览器是否支持HTML5视频。
检测
互联网上的视频
到目前为止,还没有显示视频的统一标准。
我们看到的视频大多用Flash等插件显示。 并不是所有的浏览器都有相同的插件。
HTML5规定了使用视频元素包含视频的标准方法。
浏览器支持元素列表
IE
福克斯
Chrome
Safari
Opera
请注意, Internet Explorer 8或更低版本不支持元素。
HTML5视频-工作原理
要在HTML5中显示视频,需要以下示例中的代码。
视频示例
您的浏览器不支持视频标签。
请试一下
元素具有用于控制视频的播放、暂停和音量控制。
元素还具有width和height属性,用于控制视频的大小。 通过设置高度和宽度,可以在加载页面时保留所需的视频空间。 如果未设置这些属性,浏览器在加载时将无法保留特定的空间,页面将根据原始视频的大小而变化。
和标签之间插入的内容用于在不支持视频元素的浏览器中显示。
元素支持多个元素。 元素可以链接到其他视频文件。 浏览器使用第一种可识别的格式。
视频格式和浏览器支持
目前元素支持三种视频格式: MP4、WebM和Ogg。
浏览器
MP4
网络广播
Ogg
internet资源管理器
是
否
否
Chrome
是
是
是
福克斯
是
是
是
Safari
是
否
否
Opera
是(来自opera 25 ) )。
是
是
MP4=包含h.264视频编码和AAC音频编码的MPEG 4文件
WEBM包含vp8视频编码和Vorbis音频编码的WEBM文件
ogg包含theora视频编码和Vorbis音频编码的ogg文件
视频格式
格式
MIME-type
MP4
video/mp4
网络广播
video/webm
Ogg
video/ogg
通过HTML5-DOM进行控制
HTML5与元素一样具有方法、属性和事件。
可以使用JavaScript控制元素的方法、属性和事件。
其中,方法用于播放、暂停、加载等。 可以读取和设定时间的长度、音量等属性。 DOM事件会通知您元素的播放开始、暂停、停止等。
上面的简单示例说明了如何使用元素、如何读取和设置属性以及如何调用方法。
以下是创建视频播放/暂停和调整大小的简单控件的video示例。
视频实例
播放/暂停
放大
缩小
普通的
你的浏览器不支持html 5视频。
这个实例调用了play (和pause )的两个方法。 同时使用了paused和width这两个属性。
请试一下
html5视频标签
标签
说明
定义各种媒体资源,例如和
在媒体播放器中定义文本轨道