javascript - Pause button not working on background video -
im trying create nice background video has text on top button can use pause , unpause video, video works fine , loops, cant pause video.
<html> <head> <script src="js/script.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/custom.css"> </head> <body> <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop> <source src="dudleybydrone.mp4" type="video/mp4"> </video> <div id="polina"> <h1>dudley</h1> <p>directed joe bloggs <p><a href="">original article</a> <p>blah blah</p> <button>pause</button> </div> </body> </html> js (i got code here , though says "// functional if "loop" removed" have tried removing "loop" , still doesn't pause:
var vid = document.getelementbyid("bgvid"); var pausebutton = document.queryselector("#polina button"); function vidfade() { vid.classlist.add("stopfade"); } vid.addeventlistener('ended', function() { // functional if "loop" removed vid.pause(); // capture ie10 vidfade(); }); pausebutton.addeventlistener("click", function() { vid.classlist.toggle("stopfade"); if (vid.paused) { vid.play(); pausebutton.innerhtml = "pause"; } else { vid.pause(); pausebutton.innerhtml = "paused"; } })
you need reference button more specificity.
var playpause = document.queryselector("#playpause"); there changes throughout source playbutton changed playpause not problem preference. indirect selector may or may not work document.queryselector() since tends accept simple selectors more readily (from experience, not sure if it's documented.)
snippet
var vid = document.getelementbyid("bgvid"); var playpause = document.queryselector("#playpause"); function vidfade() { vid.classlist.add("stopfade"); } vid.addeventlistener('ended', function() { // functional if "loop" removed vid.pause(); // capture ie10 vidfade(); }); playpause.addeventlistener("click", function() { if (vid.paused) { vid.play(); playpause.innerhtml = "pause"; } else { vid.pause(); playpause.innerhtml = "paused"; } })<html> <head> <script src="js/script.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/custom.css"> </head> <body> <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop> <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> </video> <div id="polina"> <h1>dudley</h1> <p>directed joe bloggs <p><a href="">original article</a> <p>blah blah</p> <button id="playpause">play/pause</button> </div> </body> </html>
Comments
Post a Comment