jquery - TypeError: video_playlist is null JavaScript -
this question has answer here:
i trying make video playlist , new js, have run lot of problems.
i trying run code:
//simple js playlist kristi witts - https://github.com/kwitts/js-playlist/ //mit license //ensure links in div "#player" act in same way: var video_playlist = document.getelementbyid("myvideo"); //element id should same id used in container div in html. var links = video_playlist.getelementsbytagname('a'); (var = 0; < links.length; i++) { links[i].onclick = handler; }; //give functionality links: function handler(e) { e.preventdefault(); //prevents default action of links going directly source file videotarget = this.getattribute("href"); //looks @ filename in link's href attribute filename = videotarget.substr(0, videotarget.lastindexof('.')) || videotarget; //splits filename , takes before ".", giving name without extension video = document.queryselector("#myvideo video"); //finds div #player , video video.removeattribute("poster"); //removes poster attribute in video tag source = document.queryselectorall("#myvideo video source"); //finds source elements inside video tag source[0].src = filename + ".mp4"; //defines mp4 source video.load(); //loads video when video 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 not support 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 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>but getting typeerror: video_playlist null know why happening , can fix it, , prevent in future after know how happened.
for reason (i think may video_player null) playlist not replace video in video player, opens , plays video if selected file>open with>firefox.
your javascript doesn't reference dom. issues have video element source element beneath it, you're using
video = document.queryselector("#myvideo video") you later call video.load(), on source element, not video element. have reloaded video call load on it
video = document.getelementbyid("myvideo") here is, fixed:
//simple js playlist kristi witts - https://github.com/kwitts/js-playlist/ //mit license //ensure links in div "#player" act in same way: var video_playlist = document.getelementbyid("playlist"); //element id should same id used in container div in html. var links = video_playlist.getelementsbytagname('a'); (var = 0; < links.length; i++) { links[i].onclick = handler; }; //give functionality links: function handler(e) { e.preventdefault(); //prevents default action of links going directly source file videotarget = this.getattribute("href"); //looks @ filename in link's href attribute filename = videotarget.substr(0, videotarget.lastindexof('.')) || videotarget; //splits filename , takes before ".", giving name without extension video = document.queryselector("#myvideo source"); //finds div #player , video video.removeattribute("poster"); //removes poster attribute in video tag source = document.queryselectorall("#myvideo source"); //finds source elements inside video tag source[0].src = filename + ".mp4"; //defines mp4 source video = document.getelementbyid("myvideo") video.load(); //loads video when video selected video.play(); //plays video automatically return false; }; here's working fiddle: https://jsfiddle.net/d2tgyfzb/
Comments
Post a Comment