0

我正在处理一个页面，该页面具有多个 HTML5 视频元素，当单击链接时，这些元素会在 CSS 模式框中弹出。该页面最初会开始下载页面上的每个视频，但是，在这里找到类似的主题后，我能够将源设置为 src=""，从而使页面快速加载。当用户选择一个视频并且它在模式框中弹出时，我现在很难恢复下载。

我对 Javascript 并不陌生，但我也不精通。理想情况下，每个视频源都应该设置为“”，然后当视频打开时，视频应该重新加载。我还添加了一个功能，用于在模式关闭时暂停视频，因为它用于继续播放。感谢任何帮助或批评，我在这里学习。谢谢！

HTML：

<div class="image" style="float:left;margin:0;"><a href = "#layers" id="showModal"><img src="video-image.png" alt="Play visualization" width="150"/><br />Layers</a>
    <div id="layers" class="modalDialog">
        <div> 
            <a href="#close" class="close" id="closeModal">Close</a>
            <h3>Layers</h3>
            <video id="videoContainer" class="videoContainer" loop="loop" style="width:698px;">
                <source src="video-file.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
                <source src="video-file.webm" type='video/webm; codecs="vp8, vorbis"' />
                <source src="video-file.ogv" type='video/ogg; codecs="theora, vorbis"' />
            </video>
        </div>
    </div>
</div>

Javascript：

$(document).ready(function(){

 for(var i=0; i< 20; i++)
 {
     document.getElementsByTagName("video")[i].src="";
 }
 $("#showModal").click(function() {
    var videoID = document.getElementsById("showModal").getAttribute('href');
    var videoElement = document.getElementsById(videoID).getElementsByTagName("video");
    videoElement.load();

    });

    $("#closeModal").click(function() {
        $("#videoContainer")[0].pause();             
    });
});
4

1 回答 1

0

这个答案可能是相关的。

没有您的文件，但使用以下代码使其工作：

 <video id="videoContainer" class="videoContainer" style="width:698px;">  
   <source id="mp4Source" src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
 </video>


$("#showModal").click(function () {
    var videoID = document.getElementById("showModal").getAttribute('href');
    var videoElement = document.getElementById("layers").getElementsByTagName("video")[0];
    var srcID = document.getElementById("mp4Source");

    videoElement.src = srcID.getAttribute("src");
    videoElement.load();
    videoElement.play();
});
于 2013-05-03T18:35:36.327 回答