How to dynamically replace HTML5 Video src

Question

I've got a project where I've got several videos that I'd like to dynamically load into the page. my HTML is fairly simple a single video tag

<video controls preload width="520" height="350" id="video">
<source src="videos/video0.mp4" type="video/mp4" id="video_source">
</video>

<div id="playlist">
    <a href="videos/video1.mp4">Video File Tomorrow</a>
    <a href="videos/video2.mp4">Video File Tomorrow</a>             
</div>

I'm only using an MP4 file because this project only needs to function in Safari. I've tried 2 JS solutions and both seem to generate separate issues

Solution 1

$("#playlist a").click(function(){
   var video_source_link=$(this).attr("href");
   document.getElementById("video_source").setAttribute("src",video_source_link);
   document.getElementById("video").load();
   document.getElementById("video").play();
   return false;
});

In this version JS updates the src attribute of the source tag but does not load the video.

Solution 2

$("#playlist a").click(function(){
       var video_source_link=$(this).attr("href");
       document.getElementById("video_source").setAttribute("src",video_source_link);
       document.getElementById("video_source").load();
       document.getElementById("video_source").play();
       return false;
});

In this version the video loads into a blank window and when I click the back button Safari crashes with the following error WebKit2WebProcess.exe has encountered a problem and needs to close

possible duplicate of changing source on html5 video tag

Blazemonger
– Blazemonger

2013-12-11 19:00:05 +00:00
Commented Dec 11, 2013 at 19:00 — Blazemonger
– Blazemonger, Commented Dec 11, 2013 at 19:00

tommy chheng · Accepted Answer · 2014-07-22 18:12:48Z

1

Try changing the video tag instead of the inner child source tag:

$("#video")[0].src = $(this).attr("href");

answered Jul 22, 2014 at 18:12

tommy chheng

9,24810 gold badges57 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

firepunch · Accepted Answer · 2017-02-14 00:42:28Z

0

First, check your video_source_link. If you're video_source_linkis correct, I recommend to delete this line document.getElementById("video").play();in soultion 1. Or How about delete controls preload in the video tag? And the follwing code works for me.

HTML

 <video width="320" height="240" autoplay>
   <source id="video_path" src="" type="video/mp4">
 </video>

JS

 $('#video_path').attr('src', 'path');
 $('video').load();

answered Feb 14, 2017 at 0:42

firepunch

991 silver badge5 bronze badges

Collectives™ on Stack Overflow

How to dynamically replace HTML5 Video src

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related