Change video being played in HTML5 video

Question

I'm using the tags in HTML5 to play a video on a web browser... (and I'm very impressed with this new feature)

Is there the functionality to change the video being played through Javascript? Say when I select another video from a list, a Javascript function would be called which would contain something on the lines of MyVideo.VideoLocation = //location of new video to be played. Is this possible please?

Thanks and regards, Krt_Malta

look at this post: http://stackoverflow.com/questions/5703203/html5-video-change-multiple-sources nice and simple solution! — , Sep 19 '11 at 14:57

score 24 · Answer 1 · edited Jun 15 '19 at 07:20

24

Webkit requires that you call "load()" after changing the source:

videoTag.src = "newVideo";
videoTag.load();
videoTag.play();

Apple has a useful tutorial.

edited Jun 15 '19 at 07:20

Cœur

32,421
21
173
232

answered May 19 '10 at 02:51

Phil Crosby

449
4
8

You sir are my hero! – alexalexandresq Mar 11 '16 at 15:51

score 5 · Answer 2 · answered Apr 23 '11 at 19:56

5

Here is the solution, tested on Ipad/Iphone/Webkit/Firefox

<script>

function playNext(path,target)
{
target[0].src=path;
target[0].load();
target[0].play();
}

playNext("pathToMovie",$('#video_1'));

</script>

answered Apr 23 '11 at 19:56

samccone

9,746
5
39
50

1

target[0].load();target[0].play(); will do nothing on iPhone – Kevkong Nov 15 '13 at 17:06
1

It shouldn't have done. iOS doesn't allow videos to be played automatically or via script. See: http://stackoverflow.com/a/12496184/989920 – evolutionxbox Oct 31 '14 at 14:21

score 0 · Answer 3 · answered May 05 '10 at 10:43

0

The property to be used:

videoTag.src

If it doesn't auto-start playing after that:

videoTag.play()

answered May 05 '10 at 10:43

Delan Azabani

73,106
23
158
198

Change video being played in HTML5 video

3 Answers3

Linked