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