HTML5视频的使用总结

HTML5新增了video视频标签,目前主流浏览器对video支持良好。

遇到的问题:视频格式不支持或MIME类型不支持

经实践发现各大主流浏览器都支持mp4格式,但是最好讲MP4设置为H.264 编码格式,这个可以通过格式工厂等视频处理软件实现。

MIME类型是IIS服务器的属性,打开IIS服务器选择网站目录,双击MIME类型,点击添加,扩展名:.mp4,MIME类型:video/mp4

 <video class='v-video' id='Video' preload='none' poster='/Template/xpshop_currents/Images/lun1111.jpg' src="/Template/xpshop_currents/Images/ckjs.mp4"  controls="controls"></video>

controls="controls"  视频控制器

poster='/Template/xpshop_currents/Images/lun1111.jpg'  播放前图片

preload='none' 不预先加载(省流量、减少服务器负担)

Video.onpause=function(){
  $('#Vimg1').css('display','block');
}; 暂停时事件
Video.onplay=function(){
  $('#Vimg').css('display','none');
  $('#Vimg1').css('display','none');
  $('#P1video').css('display','none');
}; 播放时事件
$('#Vimg').click(function(){
  $('#Vimg').css('display','none');
  Video.play(); //开始播放
})

//播放进度初始化

Video.currentTime=0;

 如何兼容IE8?

  引入html5media.min.js

  引入地址:  <script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>  

  github:https://github.com/etianen/html5media/wiki

posted @ 2017-08-21 10:36  野望之风  阅读(180)  评论(0编辑  收藏  举报