Question

我正在尝试制作视频播放列表，而且我是JS的新手，所以我遇到了很多问题。

我正在尝试运行此代码：

None

//Simple JS Playlist by Kristi Witts - https://github.com/kwitts/js-playlist/
//MIT License

//Ensure all links in the div "#player" act in the same way:
var video_playlist = document.getElementById("myVideo"); //Element ID should be the same as the ID used in the container div in the HTML.
var links = video_playlist.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
  links[i].onclick = handler;
};
//Give functionality to the links:
function handler(e) {
  e.preventDefault(); //Prevents default action of links going directly to the source file
  videotarget = this.getAttribute("href"); //looks at the filename in the link's href attribute
  filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget; //Splits the filename and takes everything before the ".", giving us just name without the extension
  video = document.querySelector("#myVideo video"); //Finds div #player and video
  video.removeAttribute("poster"); //Removes the poster attribute in the video tag
  source = document.querySelectorAll("#myVideo video source"); //Finds source elements inside the video tag
  source[0].src = filename + ".mp4"; //defines the MP4 source
  video.load(); //Loads video when video is selected
  video.play(); //Plays video automatically
  return false;
};

但我得到<div class="six columns"> <div class="videoContainer"> <video id="myVideo" controls preload="auto" poster="images/1-thm.png" width="600" height="350"> <source src="videos/1.mp4" type="video/mp4" /> <p>Your browser does not support the video tag.</p> </video> <div class="caption">Screamer 2015 Intro</div> <div class="control"> <div class="topControl"> <div class="progress"> <span class="bufferBar"></span> <span class="timeBar"></span> </div> <div class="time"> <span class="current"></span><i>/</i> <span class="duration"></span> </div> </div> <div class="btmControl"> <div class="btnPlay btn" title="Play/Pause video"></div> <div class="btnFS btn" title="Switch to full screen"></div> <div class="volume" title="Set volume"> <span class="volumeBar"><i></i></span> </div> <div class="sound sound2 btn" title="Mute/Unmute sound"></div> </div> </div> <div class="loading"></div> </div> </div> <div class="five columns" id="playlist-parent"> <div id="playlist"> <img src="#" class="thumbnails" id="2"><a href="videos/2.mp4">Screamer | Intro | Version (Step Style)</a> <img src="#" class="thumbnails" id="3"><a href="videos/3.mp4">Screamer | Speedart | Joined Naive! </a> <img src="#" class="thumbnails" id="4"><a href="videos/4.mp4">Screamer | Speedart | AE7 Banner</a> <img src="#" class="thumbnails" id="5"><a href="videos/5.mp4">Screamer | Speedart | Luck 7 Snipers Banner</a> <img src="#" class="thumbnails" id="6"><a href="videos/6.mp4">Screamer | Speedart | ESmthz Banner (Client Work)</a> <img src="#" class="thumbnails" id="7"><a href="videos/7.mp4">Screamer | Speedart | Solar #SolarDRC</a> <img src="#" class="thumbnails" id="8"><a href="videos/8.mp4">Screamer | Speedart | Dare Creations</a> <img src="#" class="thumbnails" id="9"><a href="videos/9.mp4">Screamer | Speedart | Line Banner | New Style?</a> <img src="#" class="thumbnails" id="10"><a href="videos/10.mp4">Screamer | Speedart | Version 2-in-1</a> </div> </div> 我想知道为什么会发生这种情况以及我可以采取哪些措施来解决这个问题，并在我知道它发生后如何防止它发生。

出于某种原因（我认为可能是这个video_player为空）我的播放列表不会替换视频播放器中的视频，但它会打开并播放视频，就像您选择文件＆gt;打开＆gt;一样。火狐。

Answer 1

你的javascript没有引用dom。问题是你有一个视频元素，其下面有一个源元素，但你正在使用

video = document.querySelector("#myVideo video")

您稍后调用video.load（），但这是在源元素上，而不是视频元素。我已重新加载视频以调用其上的负载

video = document.getElementById("myVideo")

这是固定的：

//Simple JS Playlist by Kristi Witts - https://github.com/kwitts/js-playlist/
//MIT License

//Ensure all links in the div "#player" act in the same way:
var video_playlist = document.getElementById("playlist"); //Element ID should be the same as the ID used in the container div in the HTML.
var links = video_playlist.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
  links[i].onclick = handler;
};
//Give functionality to the links:
function handler(e) {
  e.preventDefault(); //Prevents default action of links going directly to the source file
  videotarget = this.getAttribute("href"); //looks at the filename in the link's href attribute
  filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget; //Splits the filename and takes everything before the ".", giving us just name without the extension
  video = document.querySelector("#myVideo source"); //Finds div #player and video
  video.removeAttribute("poster"); //Removes the poster attribute in the video tag
  source = document.querySelectorAll("#myVideo source"); //Finds source elements inside the video tag
  source[0].src = filename + ".mp4"; //defines the MP4 source
  video = document.getElementById("myVideo")
  video.load(); //Loads video when video is selected
  video.play(); //Plays video automatically
  return false;
};

这是一个工作小提琴：https://jsfiddle.net/d2tgyfzb/

TypeError：video_playlist为null JavaScript

1 个答案: