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

视频 jsmpeg

在这个案例（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

同时发布在个人简书： https://www.jianshu.com/p/95147e32bcaf

发表于 2018-08-15 19:40
阅读 ( 1056 )
分类：Html5前端

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

你可能感兴趣的文章

相关问题

1 条评论

作家榜 »