changing source on html5 video tag

by

I hated all these answers because they were too short or relied on other frameworks.

Here is “one” vanilla JS way of doing this, working in Chrome, please test in other browsers:

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'http://techslides.com/demos/sample-videos/small.mp4');
source.setAttribute('type', 'video/mp4');

video.appendChild(source);
video.play();
console.log({
  src: source.getAttribute('src'),
  type: source.getAttribute('type'),
});

setTimeout(function() {
  video.pause();

  source.setAttribute('src', 'http://techslides.com/demos/sample-videos/small.webm');
  source.setAttribute('type', 'video/webm');

  video.load();
  video.play();
  console.log({
    src: source.getAttribute('src'),
    type: source.getAttribute('type'),
  });
}, 3000);
<video id="video" width="320" height="240"></video>

External Link

More Related Contents:

  1. Capture iframe load complete event
  2. Streaming a video file to an html5 video player with Node.js so that the video controls continue to work?
  3. HTML 5 video or audio playlist
  4. Retrieving HTML5 video duration separately from the file
  5. Can I use javascript to dynamically change a video’s source?
  6. JavaScript: Extract video frames reliably
  7. Capture frames from video with HTML5 and JavaScript
  8. Why don’t audio and video events bubble?
  9. Programmatically play video with sound on Safari and Mobile Chrome
  10. HTML5 video not streaming and taking 90 seconds to load
  11. Detect if HTML5 Video element is playing [duplicate]
  12. How to mute an html5 video player using jQuery
  13. Updating source URL on HTML5 video with React
  14. play pause html5 video javascript
  15. How to change the playing speed of videos in HTML5?
  16. HTML5 callbacks?
  17. How to determine the intended frame-rate on an html video element
  18. canvas.toDataURL() Security Error The operation is insecure
  19. How can I set preview of video file, selecting from input type=’file’
  20. How often does the timeupdate event fire for an html5 video
  21. Create thumbnail from video file via file input
  22. HTML5 video javascript controls – restart video
  23. HTML5 and Javascript to play videos only when visible
  24. Play HTML5 Video when scrolled to
  25. Media Source Api not working for a custom webm file (Chrome Version 23.0.1271.97 m)
  26. HTML5 Video: Streaming Video with Blob URLs
  27. HTML5 Video autoplay with sound unmuted
  28. Javascript: How to force the user to click on select
  29. How to handle “Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.” on Desktop with Chrome 66?
  30. Good beginners tutorial to socket.io? [closed]

Leave a Comment