Video标签播放视频?谷歌浏览器?safari?? 谷歌浏览器播放不了mp4格式的视频的原因
2014-01-07 13:23
651 查看
webm格式和mp4格式,判断了浏览器能否支持的视频类型后,给了一个if判断,如果是支持mp4格式,就返回视频后缀mp4,如果是webm,就返回后缀webm。结果,在谷歌浏览器中播放不了,为什么我指定源为webm格式的视频时,谷歌浏览器毫无错误的播放了,但是,如果是使用if判断,发现选择的是mp4,而不是webm,咋办?
先来看看这两段代码,差别只是顺序上的。
下面我们来看一张各个浏览器对video元素支持的三种视频格式的情况表:
我们可以看到,
1、chrome既支持mp4格式也支持webm格式。但是火狐和谷歌浏览器都会优先选择mp4格式(实践证明的)。
2.此时当这里的mp4格式的视频播放不了时,就出现了我遇到的情况,例如:在获取中会显示视频被破坏。所以还是建议把浏览器选择webm格式的代码写在前面,mp4的写在后面,为了让它先选择webm格式的视频,或者用程序中的判断也可以。
现在来说说为什么谷歌播放不了mp4格式的视频的原因??
这是谷歌搜索后学到的内容,又有进步了,哈哈。
原因:
Chrome浏览器支持HTML5,它只是支持原生播放部分的MP4格式。MP4视频格式,在我写这篇笔记时,我也以为mp4格式就是后缀为.mp4,其实不是,MP4本身不是一种简单的视频格式,它是一个包装视频和音频格式的壳,里面的视频音频的编码格式使用什么编码方式是可变的。MP4视频有两种编码方式,Divx和H264,but,Chrome支持H264。于是我上面的例子中,浏览器看到有MP4后缀的文件,使用原生HTML5视频播放,后来却发现视频格式无法解码,于是,Chrome无法播放视频。FF估计也是类似的原因。
有时间可以看看这个 http://my.oschina.net/maomi/blog/144086
先来看看这两段代码,差别只是顺序上的。
/*************************************获取视频格式***************************/ function getFormatExtension(){ if( video.canPlayType("video/webm") !=""){ //针对谷歌浏览器 return ".webm"; }else if( video.canPlayType("video/mp4") !="" ){ //针对safari浏览器 return ".mp4"; } }
/*************************************获取视频格式***************************/ function getFormatExtension(){ if( video.canPlayType("video/mp4") !=""){ //针对谷歌浏览器 return ".mp4"; }else if( video.canPlayType("video/webm") !="" ){ //针对safari浏览器 return ".webm"; } } 结果:在谷歌浏览器中不能正常播放。
下面我们来看一张各个浏览器对video元素支持的三种视频格式的情况表:
我们可以看到,
1、chrome既支持mp4格式也支持webm格式。但是火狐和谷歌浏览器都会优先选择mp4格式(实践证明的)。
2.此时当这里的mp4格式的视频播放不了时,就出现了我遇到的情况,例如:在获取中会显示视频被破坏。所以还是建议把浏览器选择webm格式的代码写在前面,mp4的写在后面,为了让它先选择webm格式的视频,或者用程序中的判断也可以。
现在来说说为什么谷歌播放不了mp4格式的视频的原因??
这是谷歌搜索后学到的内容,又有进步了,哈哈。
原因:
Chrome浏览器支持HTML5,它只是支持原生播放部分的MP4格式。MP4视频格式,在我写这篇笔记时,我也以为mp4格式就是后缀为.mp4,其实不是,MP4本身不是一种简单的视频格式,它是一个包装视频和音频格式的壳,里面的视频音频的编码格式使用什么编码方式是可变的。MP4视频有两种编码方式,Divx和H264,but,Chrome支持H264。于是我上面的例子中,浏览器看到有MP4后缀的文件,使用原生HTML5视频播放,后来却发现视频格式无法解码,于是,Chrome无法播放视频。FF估计也是类似的原因。
有时间可以看看这个 http://my.oschina.net/maomi/blog/144086
相关文章推荐
- Video标签播放视频?谷歌浏览器?safari?? 谷歌浏览器播放不了mp4格式的视频的原因
- 验证是否支持html5的Video标签及MP4视频播放
- ios下video标签无法播放视频
- 验证是否支持html5的Video标签及MP4视频播放
- video标签在播放视频时的各种状态
- 直接在低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频的办法
- asp.net中video播放MP4格式的视频
- 直接在低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频的办法
- HTML5 audio与video标签实现视频播放,音频播放
- HTML5 audio与video标签实现视频播放,音频播放
- html5的video标签插入mp4视频放在iis服务器访问无法播放解决方案
- Android HTML5 Video视频标签自动播放与自动全屏问题解决
- H5播放器标签video播放mp4格式有声音没有图像解决方法
- 用VideoView播放视频出现Can't play this video原因
- 兼容html5 video标签视频播放,html5media.min.js
- iis配置站点,页面中的video 视频标签加载的视频无法播放或者无法加载的解决方法
- web项目引用html5 video标签实现视频播放的坑
- UIWebView 播放 h5 中 video 标签视频
- 使用HTML5的video标签播放视频
- H5 video 标签 播放事件 视频加载完成事件 获取视频播放进度时间