“漫威电影十周年” H5视频播放分析

在这个案例（http://go.163.com/web/20180423_aa3/index.html）里面，用了很令人感兴趣的视频相关知识，并根据系统做了判断，分别采用不同的解决方案。

1.首先创建两个视频播放器函数
分别是ios的mp4播放video_1()
andriod的ts播放器video_2()

ios:

android(创建一个canvas用于渲染jsmpeg内容):

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