在這個(gè)案例（http://go.163.com/web/20180423_aa3/index.html）里面垦梆，用了很令人感興趣的視頻相關(guān)知識(shí)，并根據(jù)系統(tǒng)做了判斷仅孩，分別采用不同的解決方案托猩。
1.首先創(chuàng)建兩個(gè)視頻播放器函數(shù)
分別是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(創(chuàng)建一個(gè)canvas用于渲染jsmpeg內(nèi)容):
<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.在初始化函數(shù)里面進(jìn)行瀏覽器判斷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函數(shù)里面加入
if(netease.ua.android || netease.ua.weibo) {
? ? ? ? ????video_2();
? ? ? ? ????$('.video_cont').remove();
} else if(netease.ua.ios) {
? ? ? ? ????video_1();
}
其他：其實(shí)在ios里面，也是可以用JSMpeg播放.ts視頻辽慕，只是不明白為什么沒(méi)有聲音京腥？是因?yàn)閕os不支持JSMpeg的mp2音頻還是什么原因？
但是溅蛉，我用了JSMpeg+mp3播放也能夠解決ios下使用同一套視頻播放方案的問(wèn)題.
【H5案例分享】網(wǎng)易新聞|噠噠：漫威電影十周年
https://zhuanlan.zhihu.com/p/36189972
