javascript - How do I force an html5 embedded video to finish playing? -
some background: web object in articulate presenter '13 course, loaded instance of mooodle lms.
the 'web object' html file wrote, relevant part of written so:
<video width="720" height="406" controls src="http://download.atsmedia.com/lms/pge/coub-sale.mp4" type="video/mp4"> <p>if reading this, because browser not support html5 video element.</p> </video>
i've been avoiding javascript want keep cross-platform & cross-browser friendly possible. i'm looking simplest solution. if has additional info relating articulate presenter '13 (or moodle), i'm ears - goal there force video finish before learner can advance next slide.
the goal there force video finish before learner can advance next slide.
not using javascript in case like expecting pizza delivered without ordering 1 (and javascript not cross-platform issue).
the way video element can tell browser environment has finished (excluding visuals/ui) broadcast event ended
. pick event need javascript.
on ended event can enable next button or of sort:
example
the video below skip 8:04 minutes (in browsers support media fragments - don't need skip end, not requirement) , when video ends button above named next enabled -
document.queryselector("video").addeventlistener("ended", function() { // enable next button when video finished: document.queryselector("button").disabled = false; })
body {background:#999} button:disabled {color:#ccc}
<button disabled=true>next</button><br> <video autoplay width="720" height="406" controls src="http://download.atsmedia.com/lms/pge/coub-sale.mp4#t=484" type="video/mp4"> </video>
Comments
Post a Comment