- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 连续播放
- </title>
- <style>
- video{ margin: 0 auto; width: 500px; height: 500px; }
- </style>
- </head>
- <body>
- <video id="myvideo" width="100%" height="auto" controls="controls">
- 你的浏览器不支持HTML5播放此视频
- <source src="videos/demo.mp4" type='video/mp4' />
- </video>
- </body>
- </html>
- <script src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js">
- </script>
- <script language="javascript">
- $(document).ready(function() {
- video.play();
- });
- var vList = ['videos / demo2.mp4', 'videos / demo3.mp4', 'videos / demo.mp4']; // 初始化播放列表
- var vLen = vList.length;
- var curr = 0;
- var video = document.getElementById("myvideo");
- video.addEventListener('ended',
- function() {
- alert("已播放完成,继续下一个视频") play();
- });
- function play() {
- video.src = vList[curr];
- video.load();
- video.play();
- curr++;
- if (curr >= vLen) {
- curr = 0; //重新循环播放
- }
- }
- </script>
来源: http://www.bubuko.com/infodetail-1952340.html