谷歌Chrome 53产品的更新时屏蔽了部分Flash特定应用，Chrome 55浏览器将自动默认使用HTML 5视频，Chrome 58时直接以默认的方式禁止运行flash，至此，曾经无处不在的flash插件，终于将要退出历史舞台了。

图1 - 谷歌浏览器已默认禁用flash插件

作为视频播放主要载体flash插件的退出，html5视频应用就成了各类网站播放视频时，最佳的选择，那么，网站中使用html5标签来调用视频，应该注意些什么呢？

1. 视频文件格式的问题

HTML5调用视频的代码写法参考：

<video width="320" height="240" controls>
<source src="test.webm" type='video/webm'>
<source src="test.ogg" type='video/ogg'>
<source src="test.mp4" type='video/mp4'>
<p>您的浏览器不支持HTML5标签</p>
</video>

由于不同浏览器对视频格式的支持性不一样，所以，用户在引用html5时，得考虑用多个视频文件来做适配。例如以上代码，在浏览器中执行时，会从上到下，依次播放test.webm、test.ogg、test.mp4，当浏览不支持.webm格式时，会尝试播放.ogg格式。

2. 视频文件编码的问题

视频文件编码的问题，起因是MPEG标准引起。一个视频文件，主要由视频编码+音频编码两部分组成，简单一点说，mp4文件格式下，还细分成多种不同标准的编码，例如DivX、H.264，而只有主要是H.264在html5中使用时效果最佳，阿酷本人测试过其他编码，在html5下是不显示画面，也就是不支持；音频方面，也有mp3编码、aac编码、经本人测试，aac的效果最佳。文件编码方面说了这么多，汇成简单一点的总结就是：如果你要在html5中调用mp4文件，请使用 h.264的视频编码 + aac的音频编码。参考如下图。

图2 - 视频文件视频编码和音频编码

3. 浏览器是否支持html5的video标签

浏览器产品市面上有各种各样的，charome、FireFox、IE、QQ浏览器、360浏览器等等，并且每种浏览器的版本对html5支持情况，也各不相同，那么就得在调用html5视频标签时，对浏览器的支持情况做个判断，使用video 对象的 canPlayType 方法来实现，canPlayType会返回"empty"、"maybe" 或 "probably"。

var playMsg = myvideo.canPlayType('video/mp4; ');
if ("" != playMsg) { msg.innerHTML += "mp4/H.264 is " + playMsg + " supported"; }

4. 视频结束事件的处理方法

在html5的video视频标签中，视频结束事件，是由 onended 来处理的，以此可以实现视频的列表连播及其他视频播放结束时的动作。但是注意，使用时，你需把onended加到的video标签中去，代码参考如下：

<video width="320" height="240" controls οnended="myFunction()">
<source src="test.webm" type='video/webm'>
<source src="test.ogg" type='video/ogg'>
<source src="test.mp4" type='video/mp4'>
<p>您的浏览器不支持HTML5标签</p>
</video>
<script>
function myFunction() { alert("视频已播放结束"); }
</script>

图3 - 视频结束事件onended效果示意

5. html5播放器也可以很酷

截图效果：

图1-1：倍速播放效果

图1-2：倍速播放效果

我的视频应用类原创文章

酷播云免费视频二维码的完整使用教程（适合小企业做微信视频宣传）
视频二维码的适用场景
微信公众号直播有哪些不一样的玩法？
微信视频直播如何做收费直播（如何做付费的微信直播）图文教程
说说视频编码格式、视频码率、视频帧率、分辨率的概念
原创教程：带ppt课件和讲师画面的教学视频录制完整教程
如何做电视节目的视频直播（电视台节目直播）
做视频直播时如何测试本地网络的上行带宽(网速测试)
usb摄像头做教学直播实现pc和手机都可以在线观看教程
微信公众号直播有哪些不一样的玩法？
微信视频直播如何做收费直播（如何做付费的微信直播）图文教程
说说视频编码格式、视频码率、视频帧率、分辨率的概念
原创教程：带ppt课件和讲师画面的教学视频录制完整教程
如何做电视节目的视频直播（电视台节目直播）
做视频直播时如何测试本地网络的上行带宽(网速测试)
usb摄像头做教学直播实现pc和手机都可以在线观看教程
微信公众号直播有哪些不一样的玩法？
如何做电脑游戏桌面录屏直播实现手机直接观看
免费视频存储平台（微云、百度网盘、谷歌硬盘、酷播云）的截图对比
云课堂直播功能介绍，更贴合在线教育、企业内训的场景应用
基于微信小程序做直播的截图（微信小程序发起视频直播）
在线教学场景下讲师们做PPT课件直播的一些介绍
FMS/wowza/red5/SRS流媒体服务器产品对比

在线视频应用：flash播放器换html5播放器常见的问题汇总相关推荐

html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
android html5播放器,用 HTML5 播放器在 iOS 或 Android 等移动设备上播放视频
如果你想把自己网站上的视频弄得能在 iOS 或者 Android 设备上播放,你需要想两个事儿,一个是你网站上的视频播放器要支持 HTML5,还有你的视频得支持在这些设备上看. 网站的视频播放器我们可 ...
html5实现视频列表js代码,JavaScript实现html5视频播放器列表
本文将使用HTML5提供的 VideoAPI做一个自定义的视频列表播放器(重点放在视频的顺序播放,列表切换上,并不重新定义控制条). 一.插入视频如果不加上controls属性将不会显示控制条二. ...
给视频加字幕HTML代码,给Html5视频播放器添加字幕
现在各种支持HTML5的浏览器都能够播放html5视频了,但是对于字幕的支持却很少,我们期待像DVD那样强大的字幕. 往往我们还不得不通过js来做,着实是一件痛苦的事情. 现在IE10率先对HTML5 ...
android html5播放器,android Html5播放器混音解决方案
背景当一个用户正在听音乐而另一个应用需要通知用户一些重要的事情时,用户可能由于音乐声音大而不能听的通知．从Android2.2开始,平台为应用提供了一个协商它们如何使用设备音频输出的途径,这个机制叫 ...
html在线音频播放器实训总结,HTML5 播放器心得与小结
随着 HTML5 的普及,越来越多视频网站使用标签播放直播.点播内容(如下图所示).使用的好处,主要以下两点. 可以直接在页面中播放,也就是所谓的"区域播放",上半屏是视频播放 ...
保利威HTML5播放器使用文档（参考备用）
2018-11-19 长沙阴不好意思,是转载备用,不是原创的,图片为原创截图,呵呵. 功能特色: 倍速功能(0.5x / 1x / 2x ).加密.截图功能.模式切换.高清标清超清切换: 跑马灯 ...
7款高颜值HTML5播放器：让你的音乐有声有色
原文:http://www.codeceo.com/article/7-cool-html5-player.html 这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器 ...
15个最佳HTML5视频播放器
随着YouTube最近的一项政策变化,即要求创作者在获得广告收入之前必须达到10,000次观看,因此我们看到了YouTube黄金时代的落日. 现在,比以往任何时候都更需要推动创意者开发自己的视频平台并 ...

在线视频应用：flash播放器换html5播放器常见的问题汇总

我的视频应用类原创文章

在线视频应用：flash播放器换html5播放器常见的问题汇总相关推荐

最新文章

热门文章