在新标签页里打开video标签播放视频

最新推荐文章于 2023-05-18 00:15:49 发布

转载最新推荐文章于 2023-05-18 00:15:49 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/slovey/p/9300066.html

文章标签：

#运维 #javascript #ViewUI

本文介绍了一个使用HTML和JavaScript实现的功能：当点击页面上的任意一个视频时，该视频将在新标签页中全屏播放。通过为每个视频元素添加事件监听器，并在触发播放事件时打开新窗口并加载对应视频源。

实现多个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="width: 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,....)

转载于:https://www.cnblogs.com/slovey/p/9300066.html