Question

当用户点击与图片相关的视频时，我正在构建一个视频网站。但问题是用户第一次必须双击链接，然后单击即可。

这是html：

<div id="player_container">
    <video controls="controls" id="videoclip" autoplay>
        <source id="mp4video" src="videos\video.mp4" type="video/mp4"   />
        <source id="oggSource" src="video.mp4" type="video/ogg">
        <p> Your browser does not support the video tag <p>
    </video>

    <div class="vid_container_row2">
        <div class="shadow2">
            <div>
                <a href="#" onclick="myFunctionId(this.id);" id="videolink1">
                    <img class="top" src="images/gayle1.jpg" height="80px" width="110px">
                </a>
            </div>
        </div>

        <div class="shadow2">
            <div>
                <a href="#" onclick="myFunctionId(this.id);" id="videolink2">
                    <img class="top" src="images/rohit-sharma.jpg" height="80px" width="110px">
                </a>
            </div>
        </div>

        <div class="shadow2">
            <div>
                <a href="#" onclick="myFunctionId(this.id);" id="videolink3">
                    <img class="top" src="images/blara.jpg" height="80px" width="110px">
                </a>
            </div>
        </div>
    </div>
</div>

这是我的javascript代码：

<script type="text/javascript">
    function myFunctionId(id){
        var jungi = id;
        if (jungi == "videolink1")
        {
            var videocontainer = document.getElementById('videoclip');
            var videosource = document.getElementById('mp4video');
            var videobutton = document.getElementById('videolink1');
            var newmp4 = 'videos/video.mp4';
            videobutton.addEventListener("click", function(event) {
                videocontainer.pause();
                videosource.setAttribute('src', newmp4);
                videocontainer.load();
                videocontainer.play();
            }, false);
        }
        else if (jungi == "videolink2")
        {
            var videocontainer = document.getElementById('videoclip');
            var videosource = document.getElementById('mp4video');
            var videobutton = document.getElementById('videolink2');
            var newmp4 = 'second_video.mp4';
            videobutton.addEventListener("click", function(event) {
                videocontainer.pause();
                videosource.setAttribute('src', newmp4);
                videocontainer.load();
                videocontainer.play();
            }, false);
        }
        else
        {
            var videocontainer = document.getElementById('videoclip');
            var videosource = document.getElementById('mp4video');
            var videobutton = document.getElementById('videolink3');
            var newmp4 = 'third_video.mp4';
            videobutton.addEventListener("click", function(event) {
                videocontainer.pause();
                videosource.setAttribute('src', newmp4);
                videocontainer.load();
                videocontainer.play();
            }, false);
        }
    }
</script>

Answer 1

点击链接

<a href="#" onclick="myFunctionId(this.id);" id="videolink3">

您正在执行向元素添加点击处理程序的功能。要立即激活此点击，您必须再次点击。要在加载时添加事件侦听器，请从元素中删除onclick属性，然后将此函数预先应用于DOM，如下所示：

var videobutton1 = document.getElementById('videolink1');
var videobutton2 = document.getElementById('videolink1');
var videobutton3 = document.getElementById('videolink1');
[videobutton1, videobutton2, videobutton3].forEach(function(button){
    myFunctionId( button.id )
});

这是一种迂回的方式（你不应该通过id找到然后传递id，你可以只传递元素），但它可以工作。

更好的方法是将你的dom结构更好一点。这是一个例子：

var videoPath = document.querySelector('h1'); // This is for debugging on Stack Overflow - there are no videos here so nothing will display. We will change this value to show it is working.

var video = document.querySelector('video'); // get the main video element
var links = document.querySelectorAll('.changeVideoSource'); // get all links marked with the class changeVideoSource

for(var i = 0; i < links.length; i++){
  links[i].addEventListener('click', function(e){
    e.preventDefault(); // Prevent following the link
    video.src = this.getAttribute('href'); // set the source
    videoPath.textContent = this.getAttribute('href'); // show the update as the videos are not available here
    video.play(); // Although your video hasn't loaded yet, the system will actually try to start playing as soon as it can.
  })
}

video { width: 100%; height: 200px; background: #000; }

<a href="video1.mp4" class="changeVideoSource">Video 1</a>
<a href="video2.mp4" class="changeVideoSource">Video 2</a>
<a href="video3.mp4" class="changeVideoSource">Video 2</a>

<h1>video1.mp4</h1>

<video src="video1.mp4"></video>

这非常简单，添加另一个视频链接现在非常简单！此外，作为额外奖励，已停用javascript 的用户仍可访问视频，因为现在只需关注该链接。

Answer 2

video.load（）启动加载过程，但在加载视频之前返回，因此紧跟其后的播放不起作用，因为它尚未加载。你需要使用：

video.addEventListener('canplaythrough', function() {
   // Video is loaded and can be played
}, false);

Answer 3

对于一个部分：

var videocontainer = document.getElementById('videoclip');
var videobutton = document.getElementById('videolink3');
var newmp4 = 'third_video.mp4';
videobutton.onclick = null;
videocontainer.src = newmp4;
videocontainer.load();
videocontainer.oncanplay = function (e) {
videocontainer.play();
}
videobutton.onclick = function (e) {
myFunctionId(id);
}

单击不能使用javascript

3 个答案: