在新窗口打开包括视频在内的html5 <video>标签内容

Question

在新窗口打开包括视频在内的html5 <video>标签内容

3

我有兴趣使用标签在新窗口/选项卡中打开视频，因为我遇到了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>

这是我的第二次尝试：

<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>

也许这是不可能的吗？也许我对函数的基本知识掌握不够。非常感谢您提前的帮助。

- user2697568

可能是Add content to a new open window的重复问题。 - user6247920

新窗口还是模态框？就像弹出窗口一样，但你基本上仍然在同一页上。 - zer00ne

嗨，Natanel，我刚看了一下那个答案，不确定如何在这种情况下让它工作-我需要完全重新编写代码并拥有两个不同的.html文件，然后保存、上传和调用吗？谢谢！ - user2697568

嗨，Zer00ne，最好的情况是一个新窗口，因为我们希望在人们查看原始窗口中的内容时能够观看视频。我们处于有限的情况下，因为我们正在使用内容管理系统，因此只有一个“body” HTML启用的窗口可供使用。 - user2697568

@user2697568，请查看我的解决方案并告诉我是否解决了您的问题。 - user6247920

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user6247920 · Accepted Answer

如果我理解你的问题，我认为以下内容可以解决你的问题： 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() 函数一样）。你只需要调用这个函数，如果定义了 features 参数，它将会在一个新的窗口中打开。如果没有定义，它将会在一个新的标签页中打开（或者在浏览器中定义的任何其他方式中打开）。

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

原始 Fiddle

希望这对你有所帮助。