我使用href从播放列表中调用视频，我如何在同一窗口中播放视频

I'm using href to call videos from a play list how do I play the video in the same window

本文关键字：视频 播放 窗口 播放列表 调用 href      更新时间：2023-09-26

下面是一些代码。下面的脚本使用if语句允许使用图像作为指向另一个页面的链接。如果不在if语句中，视频工作完美。我需要视频在同一窗口播放，而不是打开一个新的，我需要图像(按钮)在一个新的窗口打开一个页面。

<source src="../Beyond 2000 Promo Video.mp4" type="video/mp4"/>
<source src="../Beyond 2000 Promo Video.webm" type="video/webm"/>
<source src="../Beyond 2000 Promo Video.ogv" type="video/ogg" />
<source src="../Beyond 2000 About Mike.mp4" type="video/mp4"/>
<source src="../Beyond 2000 About Mike.webm" type="video/webm"/>
<source src="../Beyond 2000 About Mike.ogv" type="video/ogg" />
<source src="../Beyond 2000 Slide Show.mp4" type="video/mp4"/>
<source src="../Beyond 2000 Slide Show.webm" type="video/webm"/>
<source src="../Beyond 2000 Slide Show.ogv" type="video/ogg"/>
<source src="../Beyond 2000 Hypnosis Facts.mp4" type="video/mp4"/>
<source src="../Beyond 2000 Hypnosis Facts.webm" type="video/webm"/>
<source src="../Beyond 2000 Hypnosis Facts.ogv" type="video/ogg"/>
<source src="../Beyond 2000 What People Are Saying.mp4" type="video/mp4"/>
<source src="../Beyond 2000 What People Are Saying.webm" type="video/webm"/>
<source src="../Beyond 2000 What People Are Saying.ogv" type="video/ogg"/>


<h1>Videos</h1>
 <a href="../Beyond 2000 Promo Video.mp4"><img src="Icons/Blue Button.png" alt="Beyond 2000 Entertainment Promo Video"><p class="playlist_btn_text">Promo Video</p></a>
 <a href="../Beyond 2000 About Mike.mp4"><img src="Icons/Purple Button.png" alt="Beyond 2000 Entertainment About Mike Video"><p class="playlist_btn_text">About Mike</p></a>
 <a href="../Beyond 2000 Slide Show.mp4"><img src="Icons/Black Button.png" alt="Beyond 2000 Entertainment Slide Show"/><p class="playlist_btn_text">Slide Show</p></a>
 <a href="../Beyond 2000 Hypnosis Facts.mp4"><img src="Icons/Yellow Button.png" alt="Beyond 2000 Entertainment Hypnosis Facts Video"><p class="playlist_btn_text">Hypnosis Facts</p></a>
 <a href="../Beyond 2000 What People Are Saying.mp4"><img src="Icons/Orange Button.png" alt="Beyond 2000 Entertainment What People Are Saying Video"/><p class="playlist_btn_text"> People Saying</p></a>


if(href="../The Beyond Advantage/The Beyond Advantage.html"){
}
else{       
    var video_playlist = document.getElementById("video_player");
         var links = video_playlist.getElementsByTagName('a');
         for (var i=0; i<links.length; i++) {
            links[i].onclick = handler;
         };
         function handler(e) {
            e.preventDefault();
            videotarget = this.getAttribute("href");
            filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget;
            video = document.querySelector("#video_player video");
            video.removeAttribute("poster");
            source = document.querySelectorAll("#video_player video source");
            source[0].src = filename + ".mp4";
            source[1].src = filename + ".webm";
            source[2].src = filename + ".ogv";
            this.video.load();  
            video.play();               
        };

你的代码看起来已经可以在播放器中加载视频了。但是，由于您的链接上有href(这很好!)，默认操作是加载该页面。通常的修复是event.preventDefault()

我不知道你是如何添加onclick事件，但如果你使用addEventListener做:

elem.addEventListener("click", function (event) {
    event.preventDefault();
    load_video(elem.href);
});
相关文章：