H5 video踩坑实录

　　　　　　前段时间公司APP做了一个APP论坛会议，嵌入了h5播放器。我以为很简单，没想到，这正是我踩进泥潭的开始。。。

　　　　（想要吸取经验的小伙伴可以慢慢往下看，想要解决方案的直接看最后！）

　　　　一、一开始我以为直接用H5原生video就可以直接实现。

　　　　　　

<video src="url" poster="video.png" width="100%" height = "9rem">video>

 

　　　　　　src ：视频地址，

　　　　　　poster：视频封面，

　　　　　　obj.play() ：播放，

　　　　　　obj.pause()：暂停。

　　　　　　到这里我以为就大功告成了，没想到啊，

　　　　　　首先没有控制条，其次苹果浏览器默认全屏，而且苹果不能直接播放和加载。后来Google发现苹果不允许直接播放视频，除非用户主动点击（这是什么混蛋逻辑）。

　　　　　　

　　　　二、改变思路，把图片放在video上层，点击触发video播放。同时添加controls，设置playsinline不全屏播放

　　　　　　html:

　　　　　　<div id = "myvideo">

　　　　　　　　<img src = "video.png">

　　　　　　　　<video src="url" poster="video.png" width="100%" height = "9rem" controls="controls" >video>

　　　　　　div>

 

　　　　　　js：

            IMG.addEventListener ('click',function(){

　　　　　　　　　img.style.display='none';

　　　　　　　　　video.style.display = 'block';

　　　　　　　});

　　　　　　　　video.addEventListener ('click',function(){

　　　　　　　　　　video[0].play();

　　　　　　　　})        

 

　　　　　　　　……

　　　　　　css就不放出来了，小伙伴们自行前往git上下载。

　　　　　　运行一下发现原生的控制条也太丑了。

　　　　　　　　　　　　　　　　　　

　　　　　　而且还发现这玩意的全屏在移动端无法全屏，点击全屏没有反应。

 

　　　　三、痛定思痛决定重写video组件，一方面优化这丑陋的原生ui，另一方面通过js方法看看能不能支持全屏。

　　　　　　html:　　

　　　　　　

　　　　　　<div class="myvideo">
　　　　　　　　<img src="images/video.jpg" style="width: 100%;height:100%;" class="img">
　　　　　　　　<video class="video" 
　　　　　　　　　playsinline="isiPhoneShowPlaysinline" x5-video-player-type="h5-page" webkit-playsinline="isiPhoneShowPlaysinline" x-webkit-airplay="" preload="none" 
　　　　　　　　　src="https://blz-videos.nosdn.127.net/1/HearthStone/f6cd63b590d416821d3e27e0.mp4" poster="images/video.jpg">video>
　　　　　　　　<div class="play">
　　　　　　　　　　<svg t="1561619557935" class="iconPause" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6167" width="2.2rem" height="2.2rem" >
　　　　　　　　　　　　<path d="M844.704269 475.730473L222.284513 116.380385a43.342807 43.342807 0 0 0-65.025048 37.548353v718.692951a43.335582 43.335582 0 0 0 65.025048 37.541128l622.412531-359.342864a43.357257 43.357257 0 0 0 　　　　　　　　　　　　0.007225-75.08948z" fill="#ffffff" p-id="6168">path>
　　　　　　　　　　svg>
　　　　　　　　　　<svg t="1562137769830" class="iconPlay" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3655" width="2.2rem" height="2.2rem" style="display: none;">
　　　　　　　　　　　　<path d="M319.618435 145.655358c-30.518061 0-55.258535 24.740474-55.258535 55.258535l0 622.170169c0 30.518061 24.740474 55.258535 55.258535 55.258535s55.258535-24.740474 55.258535-55.258535l0-　　622.170169C374.876969 170.395832 350.136495 145.655358 319.618435 145.655358z" p-id="3656" fill="#ffffff">path><path d="M704.381565 145.655358c-30.518061 0-55.258535 24.740474-55.258535 55.258535l0 622.170169c0 30.518061 24.740474 　　　　　　　　　　　　55.258535 55.258535 55.258535s55.258535-24.740474 55.258535-55.258535l0-622.170169C759.6401 170.395832 734.899626 145.655358 704.381565 145.655358z" p-id="3657" fill="#ffffff">path>
　　　　　　　　　　svg>
　　　　　　　　div>
　　　　　　　　<div class="playShade">
　　　　　　　　　　<div class="progressFather">
　　　　　　　　　　　　<div class="realTime">00:00div>
　　　　　　　　　　　　<div id="progress">
　　　　　　　　　　　　　　<span class="timeBar">span>
　　　　　　　　　　　　div>
　　　　　　　　　　　　<div class="endTime">00:00div>
　　　　　　　　　　　　<div class="all">
　　　　　　　　　　　　　　<svg t="1561625645528" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1999" width="1.6rem" height="1.6rem">
　　　　　　　　　　　　　　<path d="M576 213.333333c0 12.8 8.533333 21.333333 21.333333 21.333334h162.133334l-202.666667 202.666666c-8.533333 8.533333-8.533333 21.333333 0 29.866667 8.533333 8.533333 21.333333 8.533333 29.866667 　　　　　　　　　　　　　　0l202.666666-202.666667V426.666667c0 12.8 8.533333 21.333333 21.333334 21.333333s21.333333-8.533333 21.333333-21.333333V213.333333c0-12.8-8.533333-21.333333-21.333333-21.333333H597.333333c-12.8 　　　　　　　　　　　　　　0-21.333333 8.533333-21.333333 21.333333z m-138.666667 343.466667L234.666667 759.466667V597.333333c0-12.8-8.533333-21.333333-21.333334-21.333333s-21.333333 8.533333-21.333333 21.333333v213.333334c0 　　　　　　　　　　　　　　12.8 8.533333 21.333333 21.333333 21.333333h213.333334c12.8 0 21.333333-8.533333 21.333333-21.333333s-8.533333-21.333333-21.333333-21.333334h-162.133334l202.666667-202.666666c8.533333-8.533333 　　　　　　　　　　　　　　8.533333-21.333333 0-29.866667-6.4-8.533333-21.333333-8.533333-29.866667 0z" p-id="2000" fill="#ffffff">path>
　　　　　　　　　　　　　　svg>
　　　　　　　　　　　　div>
　　　　　　　　　　div>
　　　　　　　　div>
　　　　　　div>

 

　　　　js:

　　　　

//初始时间，进度显示
function strTime() {
starTime[0].innerHTML = timeFormat(mvideo[0].currentTime);
endTime[0].innerHTML = timeFormat(mvideo[0].duration);
var currentTime = mvideo[0].currentTime;
var duration = mvideo[0].duration;
var percent = 100 * currentTime / duration;
timeBar[0].style.width = percent + '%';
//dropProgress();
};
//播放
function videoPlay() {
mvideo[0].play();
iconPlay[0].style.display = 'block';
iconPause[0].style.display = 'none';
}
//暂停
function videoPause() {
mvideo[0].pause();
iconPlay[0].style.display = 'none';
iconPause[0].style.display = 'block';
}
//时长转换
function timeFormat(seconds) {
var minite = Math.floor(seconds / 60);
if (minite < 10) {
minite = "0" + minite;
}
var second = Math.floor(seconds % 60);
if (second < 10) {
second = "0" + second;
}
return minite + ":" + second;
}
//更新进度条
function updateProgress(x, width) {
var position = x / width;
mvideo[0].currentTime = position * mvideo[0].duration;
timeBar[0].style.width = position * 100 + '%';
}

//全屏
function all() {
// console.log(width, height);
// ovideo[0].style.transform = 'rotate(90deg) translate(' + (height - width) / 2 + 'px,' + (height - width) / 2 + 'px)';
// ovideo[0].style.zIndex = 2;
// ovideo[0].style.heigt = width + 'px';
// ovideo[0].style.width = height + 'px';
// ovideo[0].style.marginTop = -2 + 'px';
// ltitle[0].style.display = 'none';
// lcontent[0].style.display = 'none';
requestFullScreen(ovideo[0]);
};
//全屏
function requestFullScreen(element) {
var el = element;
if (el.requestFullscreen) {
el.requestFullscreen()
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen()
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)
} else if (player.video.webkitSupportsFullscreen) {
player.video.webkitEnterFullscreen()
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen()
} else {
util.addClass(el, 'xgplayer-fullscreen-active')
}
}
//退出全屏
function exitFullscreen() {
var el = document;
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else {
util.removeClass(el, 'xgplayer-fullscreen-active')
}
}
//取消全屏
function quitAll() {
// ovideo[0].style.transform = 'rotate(360deg) translate(' + (height - width) / 2 + 'px,' + (height - width) / 2 + 'px)';
// ovideo[0].style = 'none';
// ltitle[0].style = 'none';
// lcontent[0].style = 'none';
// alert(123);
exitFullscreen();
}

 

 css请前往git自行下载。

发现iOS无法全屏，查询发现iOS移动浏览器已经禁用了fullScreen组件。崩溃了要。。。

四、继续改，lz整个伪全屏出来，

　　逻辑就是判断浏览器宽高，点击全屏的时候旋转屏幕，然后赋值宽高，慢慢调整，返回全屏时js动态奖video的style设置为空。

　　

var conW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var conH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// transform: rotate(90deg); width: 667px; height: 375px;transform-origin:28% 50%;
//var iosTopHe = 0;//若有其他样式判断，写于此

$("#video").css({
"transform":"rotate(90deg) translate("+((conH-conW)/2)+"px,"+((conH-conW)/2)+"px)",
"width":conH+30+"px",
"height":conW+35+"px",
//"margin-top":iosTopHe+"px",
// "border-left":iosTopHe+"px solid #000",
"transform-origin":"center center",
"-webkit-transform-origin": "center center",
"z-index":"11111",
"margin-top":"2.2rem"
});
$("#myvideo").css({
"width":conH+"px",
"height":conW+"px",
"margin-top":"0rem",
"z-index":"11111"
});
$('.psVideo-shade').css({
"z-index":"1111111",
"width":conH+"px",
"height":conW+"px",
//"marginTop":"12rem"
});
$('.psVideo-progress').css({
"width":conH+"px",
"height":"0.2rem"
});
$('.psVideo-btn').css({
"margin-left":"12rem",
//"height":"0.2rem"
})
$('.psVideo-play-footer').css({
"margin-bottom":"-0.2rem",
//"height":"0.2rem"
})
width = conH;
var lw = $('.psVideo-timeBar').width();
var progresses = $('.psVideo-progress');
var pw = $('.psVideo-progress')
var rlw = lw*pw/width;
$('.psVideo-timeBar').css('width', rlw+'px');
qenableProgressDrag();
//updateProgress(rlw);
quan = true;

 

实现起来一言难尽。还是上效果吧。

你也看见了，状态栏收不回去。没办法，慢慢找别的思路吧。

五、我在找资料的时候，突然想起来，我上一版的页面在微信，钉钉上都能正常显示，浏览器上好像也能（safari除外）。

　　我翻过头去研究之前那一版代码，半天也没有思路，我突然发现video还有第三方插件

　　腾讯：https://cloud.tencent.com/document/product/454/7503

　　阿里：https://help.aliyun.com/document_detail/51991.html

　　七牛：https://developer.qiniu.com/pili/sdk/4621/web-player-sdk

　　头条（西瓜）：http://h5player.bytedance.com/api/#%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%AE%8C%E6%88%90

　　然并卵，在app上仍然无法正常显示，真的要崩溃了。

六、转机（重点）

　　我在漫无目的的找资料的时候，偶然点进去一个安卓webview解决办法，看的时候发现播放器好像没有这么麻烦。嘿嘿嘿，功夫不怕有心人。

　　原来移动端嵌套webview时候可以引进ui控件。

　　我又去看了一下移动端的ui控件，原来如此。

　　安卓iOS引入webview ui控件（移动端又称内核，简单来说就是一个sdk）,它可以劫持webview里的h5组件然后渲染，

　　微信，钉钉包括我的华为浏览器用的都是这种办法，微信引入了x5内核，钉钉引得啥内核，我不知道，反正事情发展到这出现了转机，我问我之前的安卓同事，从他口里听见了肯定的回复之后，我终于放松了。

　　总的来说，对于混合开发APP来说，其实播放器没有那么复杂，H５写入一个video组件即可，ｕｉ控件（sdk）会直接帮你渲染。（安卓，ios）统一样式需要他们去解决了，毕竟有的sdk不太支持iOS（比如X5）。

　　对于webApp来说，H5Plus应该是个不错的选择。