javascript - 在新窗口中打开 html5 <video> 标签内容(包括视频!)-6ren

javascript - 在新窗口中打开 html5

转载作者：行者123 更新时间：2023-12-05 05:20:34

24

4

我有兴趣使用标签在新窗口/标签中打开视频，因为我遇到间歇性问题，IE 无法打开链接的 .mp4 文件。我试图用我非常有缺陷的理解从其他答案中用 javascript 拼凑一些东西，但我就是不能让它工作。基本上，我有视频，我希望能够使用相同的代码每次使用不同的链接/按钮/图片分别引用它们，并在新窗口中打开它们。

这是我的尝试 1:

<script>
function nWin () {
    var win = window.open("", "Title", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=780,     height=200, top="+(screen.height-400)+", left="+(screen.width-840));
    win.document.body.innerHTML = "<html><body><video width="90% height="90%" controls><source src='myvideo.mp4' type="video/mp4">Your browser does not support the video tag.</video></body></html>"; 
} 
</script>

<a href="#" onClick="nWin()">Open</a>

这是我的尝试 2:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $('#popup').click(function(e) {
        e.preventDefault();
        var w = window.open('about:blank', 'MyWindow', 'width=400,height=400');
        w.document.write('<html><body><video width="90% height="90%" controls><source src='myvideo.mp4' type="video/mp4">Your browser does not support the video tag.</video></body></html>');
        w.document.close();  
      })
    });
  </script>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>

  <a id="popup" href="">Open me</a>
  
</body>
</html>

也许这是不可能的？也许我遗漏了一些关于功能的基本知识。我提前非常感谢你的帮助。

最佳答案

如果我理解你的问题，我认为这可以解决你的问题:

HTML

<a href="#" onclick="open_in_new_window('html_contents', 'MyTitle', 'location=1,status=1,toolbar=1,scrollbars=1,resizeable=1,width=500,height=250');">Open New Window</a>
<div id="html_contents" data-new-window> <!-- data-new-window is important -->
    <video controls style="width: 100%; height: auto;">
        <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4" />
    </video>
</div>

CSS

[data-new-window] {
    display: none;
}

JavaScript

function open_in_new_window(id, new_page_title, features) {
    var new_window;

    if(features !== undefined && features !== '') {
    new_window = window.open('', '_blank', features);
    }
    else {
        new_window = window.open('', '_blank');
    }

    var html_contents = document.getElementById(id);
    if(html_contents !== null) {
        new_window.document.write('<!doctype html><html><head><title>' + new_page_title + '</title><meta charset="UTF-8" /></head><body>' + html_contents.innerHTML + '</body></html>');
    }
}

解释

#html_contents存储新页面内容(<video>)，让您更轻松(而不是用 javascript 编写整个页面)。该函数需要参数 features定义新窗口(就像在 window.open() 函数中一样)。你只需要调用这个函数，如果定义了功能，它将在新窗口中打开。如果没有，它将在新选项卡中打开(或浏览器定义的任何其他方式)。

CSS 将隐藏 #html_contents在调用此函数的主窗口中。

Original Fiddle

希望对你有帮助

关于javascript - 在新窗口中打开 html5 <video> 标签内容(包括视频!)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44315727/

24

4