HTML5 video 标签浏览器兼容问题

使用需要注意的问题：

1.多种格式视频

不可以只有MP4格式，一定要引入Ogg格式视频，否则在火狐上会不兼容报错。 推荐个不错的视频格式转换器，下载地址 ：http://download.csdn.net/detail/danhuan/9905942

2.引入html5media.js

引入html5media.js,可以使兼容IE

3.如果想要设置视频宽度为百分比%自适应占满容器，注意 video的属性width不可以为百分比%

注意 不可以 直接在<video> 标签里面加width = "100%"，因为的属性width只支持像素值，不支持百分比。虽然<video width = "100%"> 在谷歌火狐浏览器中可以正确显示，但是在IE中会不兼容,导致无法播放视频。 如果想要设置视频宽度为百分比%自适应占满容器，可以 通过内部样式<style>...</style>或外部样式<link rel="stylesheet" href="CSS文件路径" />设置，但 不可以 通过内联样式style="width:100%" 设置样式，否则不兼容IE。

4.如果视频是固定宽高，则可以直接在属性中设置，千万注意不要加单位px，否则IE不兼容。

正确示例如下：

<video width="1000" height="500" controls autoplay="true" loop="true" preload="auto">

错误示例如下：

<video width="1000px" height="500px" controls autoplay="true" loop="true" preload="auto">

 

 

 

来源：https://github.com/danhuan/video-demo

 

 

 

 

//----------------------------------------------------------------------------------------------------------------------------

实现暂停播放：

<video src="xxx"  class="myVideo" ></video>

 

 <script>

$(function(){

$(".myVideo").click(function(){

var myVideo = $(this)[0];

if(myVideo.paused){

myVideo.play() 

}else{

myVideo.pause(); 

}

 

});

})

</script>