HTML5 Video同步播放库
Popcorn Inception
https://github.com/brianchirls/popcorn-inception
实现跟随主视频任意时间段同步播放子视频，示例代码如下：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>abc</title>
<style>
#video-container {
margin: 0 auto;
width: 800px;
height: 450px;
position: relative;
overflow: hidden;
border: #676767 solid 1px;
background-color: black;
}
</style>
</head>
<body>
<div id="video-container">
<video id="v1" poster="welcome.png" controls="controls" width="800" height="450">
<source src="5th.mp4" />
Your browser does not support the video tag.
</video>
</div>
<p id="info"></p>
<script type="text/javascript" src="lib/popcorn.js"></script>
<!-- additional player support -->
<script type="text/javascript" src="lib/popcorn.player.js"></script>
<script type="text/javascript" src="lib/popcorn._mediaElementProto.js"></script>
<script type="text/javascript" src="lib/popcorn.HTMLVimeoVideoElement.js"></script>
<script type="text/javascript" src="lib/popcorn.compatible.js"></script>
<script type="text/javascript" src="lib/popcorn-base.js"></script>
<script type="text/javascript" src="lib/popcorn.style.js"></script>
<script type="text/javascript" src="lib/popcorn.loudness.js"></script>
<script type="text/javascript" src="lib/popcorn.typist.js"></script>
<script type="text/javascript" src="popcorn.inception.js"></script>
<script>
(function () {
var popcorn = Popcorn('#v1', { frameAnimation: true });
popcorn.defaults('inception', {
target: 'video-container'
})
popcorn.inception({
start: 5,
end: 25,
source: 'Encoder.mp4',
sync: true,
top: '20%',
left: '20%',
width: '40%'
});
}());
</script>
</body>
</html>
解释：
在主视频“5th.mp4”播放到第5秒时，打开子视频“Encoder.mp4”，同步播放20秒，主视频第25秒时关闭子视频，可以使用from和to属性指定子视频的播放区间。
