实现多个video，点击播放，跳转到新标签页中播放；
html：
<html>
<head></head>
<body>
<video class="mini" width="200px" height="20px" src="https://v.youku.com/v_show/id_XMzcxODI5MzE0NA==.html?spm=a2hww.11359951.listitem_page1.5!7~A" preload="none" controls="controls"></video>
<video class="mini" width="200px" height="20px" src="https://v.youku.com/v_show/id_XMzcxODI5MzE0NA==.html?spm=a2hww.11359951.listitem_page1.5!7~A" preload="none" controls="controls"></video>
<video class="mini" width="200px" height="20px" src="https://v.youku.com/v_show/id_XMzcxODI5MzE0NA==.html?spm=a2hww.11359951.listitem_page1.5!7~A" preload="none" controls="controls"></video>
<video class="mini" width="200px" height="20px" src="https://v.youku.com/v_show/id_XMzcxODI5MzE0NA==.html?spm=a2hww.11359951.listitem_page1.5!7~A" preload="none" controls="controls"></video>
</body>
</html>
JS:
$function() {
for (var i = 0;i < $('video').length; i++) {
$('mini')[i].addEventListener('playing', function() {
var src = this.src;
openVideo(src);
})
}
function openVideo(src) {
var page = window.open();
var newHtml = "<body style=""background: black>" +
"<div style=" 80%;margin: auto">" +
"<video controls width="100%" autoplay src='"+src+"'></video>"+
"</div>"+
"</body>";
page.document.write(newHtml);
}
}
addEventListener() 用于向指定元素添加事件。
可以向一个元素添加多次事件或者多次不同事件，后面的事件是不会覆盖前面的。
语法：
element.addEventListener(event,fn,useCaption );
参数说明：tr件，比如 click mouseenter mouseleave
fn 回调函数
useCaption 用于描述是冒泡还是捕获。默认值是false，即冒泡传递。
当值为true，就是捕获传递。
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
语法：window.open(URL,name,features,replace)
参数详情查看http://www.runoob.com/jsref/met-win-open.html
write() 方法可向文档写入 HTML 表达式
语法：document.write(exp1,exp2,exp3,....)