其实,解决办法就是,重新写个control控制功能,.同样用流行的video.js可以实现
第一步就是增加个播放的图片..要不然没有按钮多难看!
<div class="videoDiv">
<video id="video" poster="" preload="metadata" width="100%" height="100%" autoplay="autoplay" x-webkit-airplay="allow"
webkit-playsinline>
<source src="http://125.88.92.166:30001/PLTV/88888956/224/3221227739/1.m3u8" type='application/x-mpegURL' />
</video>
<img class="playImg" src="img/play.png">
</div>
上面的视频链接是那个那个河南卫视的直播,,闲了可以自己写个video看直播
这第二步自然就是控制方法拉.其实很简单,会js的估计都会写,我抛砖引玉.....
$(document).ready(function(){
/***********判断浏览器ua类型**********************/
var n=navigator.userAgent.toLowerCase();
if(/iphone|ipad|ipod/.test(n)){
$(".playImg").remove();
}
/**************************视频控制*********************************************/
function fPlayVideo(){
$(".playImg").click(function(event) {
var myVideo = document.getElementsByTagName('video')[0];
if (myVideo.paused){
myVideo.play();
$(".playImg").css('display','none');
}
else{
myVideo.pause();
}
});
$("video").click(function(event){
var myVideo = document.getElementsByTagName('video')[0];
if (myVideo.paused){
myVideo.play();
$(".playImg").css('display','none');
}
else{
myVideo.pause();
$(".playImg").css('display','block');
}
});
$("video").bind("ended",function(){
$(".playImg").css('display','block');
});
}
$(function(){
fPlayVideo();
});
});
在ios等设备上,对video的解析,即使你没有使用control属性.他也会在你视屏的中间,放一个原生的播放按钮,所以我要判断设备,把我之前加的播放按钮给移除....懂了吧....这时候,有人又要问了.,那android呢?其实android在你不加control属性的时候,上面是什么也没有的...所以android不用考虑拉...这时候,又有人问了...咳咳咳...那个你自己的图片跟ios原生的不一样,岂不是,android跟iPhone的样式看着都不一样了...
废话不多说 ..这个解决方法,着重解决了在webview模式中,一些不支持video,,,例如小米,魅族..为啥他们不支持,,,我也不知道,,要是有知道的,欢迎留言告知.
该内容为原创,引用请注明出处,,谢谢..再来一个,,么么哒~