Question

我正在处理一个页面，该页面包含多个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();             
    });
});

Answer 1

这answer可能是相关的。

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

 <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();
});

Javascript停止HTML5视频下载，播放视频时恢复源

1 个答案: