点击不工作的javascript

Single click not working on javascript

本文关键字：javascript 工作      更新时间：2023-09-26

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

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>

当你点击链接

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

这是一个有点迂回的方法(你不应该找到by 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 的人仍然可以访问视频，因为链接现在将被跟随。

video.load()开始加载过程，但在视频加载之前返回，因此紧随其后的播放无法工作，因为它尚未加载。您需要使用:

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

对于一个部分:

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);
}
相关文章：