“漫威电影十周年” H5视频播放分析
在这个案例（http://go.163.com/web/20180423_aa3/index.html）里面，用了很令人感兴趣的视频相关知识，并根据系统做了判断，分别采用不同的解决方案。
1.首先创建两个视频播放器函数
分别是ios的mp4播放video_1()
andriod的ts播放器video_2()
ios:
<div class="video_cont warp">
<video id="video"class="video"src="http://flv2.bn.netease.com/videolib3/1804/28/PZLVY1335/SD/PZLVY1335-mobile.mp4"preload="auto" x-webkit-airplay="true"playsinline="true" webkit-playsinline="true"x5-video-player-type="h5"x5-video-player-fullscreen="true"></video>
</div>
android(创建一个canvas用于渲染jsmpeg内容):
<canvas id="canvas"class="warp" width="640"height="1236"></canvas>
var canvas, player;
function video_1() {
$(document).on('WeixinJSBridgeReady', function() {
$('#video')[0].load();
//$('.music')[0].load();
});
$('#video')[0].load();
//$('.music')[0].load();
}
function video_2() {
canvas = document.querySelector('#canvas');
player = new JSMpeg.Player('out108.ts', {
canvas: canvas,
loop: false,
autoplay: false,
audio: true
// chunkSize: 1024 * 512
});
$(document).on('WeixinJSBridgeReady', function() {
player.audioOut.unlock(onUnlocked);
});
player.audioOut.unlock(onUnlocked);
function onUnlocked() {
player.volume = 1;
}
player.play();
player.currentTime = 0;
player.pause();
}
2.在初始化函数里面进行浏览器判断function init() {
function init() {
if(netease.ua.android || netease.ua.weibo) {
player.play();
render();
} else if(netease.ua.ios) {
$('.video')[0].play();
$('.video').on('ended', function() {
$('#canvas').remove();
$('.video_cont').hide();
$('.close_btn').hide();
})
}
$('.cbt').on('click', function() {
if(netease.ua.android || netease.ua.weibo) {
player.pause();
player.destroy();
$('#canvas').remove();
$('.close_btn').hide();
} else if(netease.ua.ios) {
$('#canvas').remove();
$('.video')[0].pause();
$('.video_cont').hide();
$('.close_btn').hide();
}
})
}
3.在body.onload函数里面加入
if(netease.ua.android || netease.ua.weibo) {
video_2();
$('.video_cont').remove();
} else if(netease.ua.ios) {
video_1();
}
其他：其实在ios里面，也是可以用JSMpeg播放.ts视频，只是不明白为什么没有声音？是因为ios不支持JSMpeg的mp2音频还是什么原因？
但是，我用了JSMpeg+mp3播放也能够解决ios下使用同一套视频播放方案的问题.
【H5案例分享】网易新闻|哒哒：漫威电影十周年
https://zhuanlan.zhihu.com/p/36189972
