/    Sign up×
Community /Pin to ProfileBookmark

How to use javascript to switch the HTML5 video

Copy linkTweet thisAlerts:
Dec 15.2018

I’ll typically create a video on a page like this…

[code=javascript]
<div id=’vtLocation’ align=”center”>
<video width=”640″ height =”480″ controls poster=”/images/somephoto.jpg”>

<!–cSafari / iOS, latest firefox, and all modern browsers SHOULD support now –>
<source src =”/vids/myVideo.mp4″ type=’video/mp4′ >
<!– Older Firefox / Opera / Chrome –>

<source src =”/vids/myVideo.webm” type=’video/webm’ >

<!– Firefox / Opera / Chrome ???–>
<source src =”/vids/myVideo.ogv” type=’video/ogg’ >

<!– my call here will test for HTML5 readyness and involk Flash player if not. –>
<script type=”text/javascript”> InvolkPlayer(‘myVideo.flv’, false, ‘vtLocation’, true); </script>

<!– download as last resort ??–>

<div align=”center”>
<p>If you are unable to view the video, please email me, and let<br>
me know what computer and browser you’re using, so I can improve the site.<br><br>
</p>
</div>
</video>
</div>
[/code]

For now take it for granted my InvokePlayer() call for FLASH fallback works. My question is, what if I want to set up some buttons or links on the page to switch to another video. I’m thinking to do that i would have to directly access the video element from the DOM, and modify it there? Not sure.

to post a comment

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@rootDec 16.2018 — If you read up on the various commands and the properties for HTML5 video and audio, you will find the answer there...

Its no different than when you want to aqpply a new URL or a resource to a DIV...
Copy linkTweet thisAlerts:
@PeterPan_321authorDec 16.2018 — @root#1599060 It does seem pretty straightforward. For example...

[code=javascript]
<script>
function loadAnotherVideo() {
var video = document.getElementsByTagName('video')[0];
var sources = video.getElementsByTagName('source');
sources[0].src = 'video2.mp4';
sources[1].src = 'video2.ogv';
// add other types //
video.load();
}
</script>
[/code].

But @root, one reason I come here is to learn the "gotchas" and see what other experts are doing. Look on stack-exchange and you'll find complaints about code like the above not working in some versions of some browsers, etc. Anybody can go to a reference page and see how things SHOULD work. But I usually ask "fresh" on a forum to see what other's are actually using, and how they solved problems.
Copy linkTweet thisAlerts:
@rootDec 17.2018 — You use REFERENCE sources like the VENDORS, if you use PHP you go to PHP.NET, if you use JavaScript, then two sources are good starting points, w3Schools for the rough basics and then MDN (the Mozilla Developer Network) where you can get to grips with more complex concepts of programming.
×

Success!

Help @PeterPan_321 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...