Video标签播放视频?谷歌浏览器?safari?? 谷歌浏览器播放不了mp4格式的视频的原因

webm格式和mp4格式,判断了浏览器能否支持的视频类型后,给了一个if判断,如果是支持mp4格式,就返回视频后缀mp4,如果是webm,就返回后缀webm。结果,在谷歌浏览器中播放不了,为什么我指定源为webm格式的视频时,谷歌浏览器毫无错误的播放了,但是,如果是使用if判断,发现选择的是mp4,而不是webm,咋办?

先来看看这两段代码,差别只是顺序上的。

/*************************************获取视频格式***************************/

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
回答: 谷歌浏览器video标签自动播放的问题可以通过在video标签中添加autoplay属性来实现。比如,可以在video标签中添加autoplay属性,像这样: <video autoplay> <source src="video.mp4" type="video/mp4"> </video> 这样,在加载页面时,视频会自动播放。如果希望自动播放的同时静音,可以添加muted属性,像这样: <video autoplay muted> <source src="video.mp4" type="video/mp4"> </video> [2这样,视频会自动播放且没有声音。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [谷歌浏览器不支持audio和video标签自动播放](https://blog.csdn.net/tyf97/article/details/84238456)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [video标签设置了autoplay,自带音频的视频谷歌浏览器仍无法自动播放](https://blog.csdn.net/EchoLiner/article/details/129565294)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [谷歌浏览器audio标签自动播放音乐问题解决](https://blog.csdn.net/a545132569/article/details/82996445)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值