Broadway implementation uses javascript Andrews video automatically play
Broadway is a H.264 decoder, higher definition than jsmpge use Emscripten conversion tool made from the Android H.264 decoder, it made some optimization for WebGL.
1 先把mp4要转下 ffmpeg -i in.mp4 -s 500x804 -vcodec libx264 -pass 1 -coder 0 -bf 0 -flags -loop -wpredp 0 out.mp4
2 代码如下
<pre>
<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>
// absolute positioning is used to block the following debugging
Canvas {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
Top: 0px;
index-Z: 101;
}
var broadwaynode=$('.broadway')[0];
var broadway = new Broadway(broadwaynode);
broadway.play();
</pre>
3 official website information https://github.com/mbebenita/Broadway
ps: Unrecognized option 'wpredp' error indicates ffmpge incomplete version recommended for win