javascript采用Broadway实现安卓视频自动播放的方法(这种坑比较多 不建议使用)

javascript采用Broadway实现安卓视频自动播放的方法
Broadway 是一个 H.264 解码器, 比jsmpge清晰度要高 使用 Emscripten 工具从 Android 的 H.264 解码器转化而成,它还针对 WebGL 做了一些优化。

1 先把mp4要转下 ffmpeg -i in.mp4 -s 500×804 -vcodec libx264 -pass 1 -coder 0 -bf 0 -flags -loop -wpredp 0 out.mp4
2 代码如下

<html>
<head>
  <link type="text/css" href="screen.css" rel="stylesheet" />
</head>
<body onload="load()">
  <script src="/moban/js/jquery.min.js"></script>
  <script type="text/javascript" src="Decoder.js"></script>
  <script type="text/javascript" src="YUVCanvas.js"></script>
  <script type="text/javascript" src="Player.js"></script>
  
  <script type="text/javascript" src="stream.js"></script>
  
  <script type="text/javascript" src="mp4.js"></script>
  
  <script type="text/javascript">
    function load() {
    var broadwaynode=$('.broadway')[0];
    var broadway = new Broadway(broadwaynode);
    broadway.play();
    }
  </script>
  

  <div class="broadway" src="mozilla_story.mp4" width="640" height="360" style="float: left; position: relative;" workers="false" render="true" webgl="auto"></div>
</body>
</html>
// 用绝对定位是为了挡住下面的调试信息
canvas{
       width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 101;
}


  var broadwaynode=$('.broadway')[0];
    var broadway = new Broadway(broadwaynode);
    broadway.play();

3 官网资料 https://github.com/mbebenita/Broadway

ps:Unrecognized option ‘wpredp’这个错误 说明 ffmpge不完整 建议用win版本

原创文章如转载,请注明本文链接: http://newmiracle.cn/?p=2843

发表评论

电子邮件地址不会被公开。 必填项已用*标注