Html5之高级-4 HTML5视频处理(H5中播放视频编程实现视频播放器)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Html5之高级-4 HTML5视频处理(H5中播放视频编程实现视频播放器)相关的知识,希望对你有一定的参考价值。

一、在 html5 中播放视频


在 HTML5 中播放视频

    - HTML5 中提到最多的是视频处理,视频也是互联网中的重要应用。在HTML5中,增加了一个元素,以便在HTML文档中插入和播放视频,这个元素就是video元素

    - video元素提供了播放、暂停和音量控件来控制视频,也提供了width和height属性控制视频的尺寸。如设置的高度和宽度等。

技术分享

    - 使用video元素至少要提供两种视频格式的文件: OGG和MP4

        - OGG: 包含Theora 视频和 Vorbis 音频解码器

        - MP4: 采用 H.264 视频 和 ACC 音频解码器

        - WebM:采用VP8视频 和 Ogg Vorbis 音频解码器

技术分享


video元素

    - video元素可以实现在HTML页面中嵌入视频内容,该元素的属性可以设置是否自动播放、预加载及视频高和宽等

技术分享

    - video元素中可以使用source元素来向浏览器提供备选视频格式

技术分享

        - source元素中的src属性与video元素的src属性作用相同,都是用于读取媒体文件

技术分享



video属性

    - video元素具备以下属性

        - controls: 该属性是video元素特有属性,用于显示浏览器所提供的视频控件按钮

技术分享        - autoplay: 设置这个属性时,加载视频后自动播放

    - video元素除了controls属性外还具备以下几个属性:

        - poster:该属性指定一个URL,在视频等待播放时显示一幅图像

        - preload:该属性可以设置三个值

              none:不缓存视频,为了减少不必要的流量

              metadata:播放前只加载视频的高度、宽度

              auto:默认值,要求浏览器尽可能快地下载视频

        - loop:设置这个属性时,浏览器会反复播放该视频

技术分享


二、编程实现视频播放器


事件

    - 在不同的浏览器实现video代码,播放器控件的图形设计会有一些差别。每一种浏览器都有其特殊的按钮和进度条,甚至还有一些特殊的特性。为了让各浏览器显示效果保持一致,需要使用HTML5支持的新视频事件、属性和方法,来保持一致

    - HTML5 加入了新的事件API。在视频和音频处理中,HTML5包含一些通知媒体状态的事件,如下载进度、视频是否结束等

    - 下面是一些常用的事件

        - progress:用于更新媒体的下载进度,会周期性的触发

        - canplaythrough:当整个媒体可以顺利播放时,就会触发整个事件

        - canplay:不考虑整体状态,只要下载了一定的可放帧会触发整个事件

        - ended: 媒体到达末尾时触发

        - pause:媒体暂停时触发

        - play:媒体开始播放时触发

        - error:媒体播放出现错误时触发

技术分享


方法

    - 下面是HTML5新增加的媒体处理方法

        - play(): 播放媒体文件

        - pause(): 暂停播放

        - load(): 加载媒体文件,动态应用程序可使用该方法提前加载

        - canPlayType(type): 查看浏览器是否支持这种文件格式的媒体文件

技术分享


属性

    - html5 新增的针对视频元素处理属性如下:

        - paused: 媒体处于暂停或未播放状态,这个值为true

        - ended: 如果媒体已经结束播放,这个值为true

        - duration:返回媒体时长,以秒为单位

        - currentTime: 获取或设置媒体播放位置


总结:本章内容主要介绍了下HTML5视频处理(H5中播放视频、编程实现视频播放器)


本文出自 “技术交流” 博客,谢绝转载!

以上是关于Html5之高级-4 HTML5视频处理(H5中播放视频编程实现视频播放器)的主要内容,如果未能解决你的问题,请参考以下文章

什么是H5页面?

H5 视频

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程-css3

Html5之高级-13 Web存储API (两个存储系统sessionStoragelocalStorage)

如何同步 HTML5 视频?

Html5游戏的山寨坑,绕不过只能跳了