Play selected video

Question

    <script type="text/javascript">
function playVideo(sourceId, targetId) {
   if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
   if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
   targetId.innerHTML=sourceId.innerHTML;
   return false;

   }
    </script>
<video id="6" width="320" height="240" controls="controls"></video>

<video id="1" style="display: none;"width="320" height="240" controls="controls">
  <source src="movie1.mp4" type="video/mp4" />
  <source src="movie1.ogg" type="video/ogg" /> 
  <source src="movie1.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
<video id="2" style="display: none;" width="320" height="240" controls="controls">
  <source src="movie2.mp4" type="video/mp4" />
  <source src="movie2.ogg" type="video/ogg" /> 
  <source src="movie2.webm" type="video/webm" />
Your browser does not support the video tag.
</video>


<a href="#" onclick='return playVideo("1","6")'>Play Video 1</a>
<a href="#" onclick='return playVideo("2","6")'>Play Video 2</a>

When selecting "Play Video 2" while Video 1 is playing video 2 will not work, how can i resolve this? Is there additional script I have to add so that the second video will override the first?

score 0 · Answer 1 · answered Jul 17 '12 at 13:08

0

The way your playVideo function works is...not intuitive.

Use videoElement.play(); to play a video. For example, document.getElementById('1').play();. To stop a video from playing, use stop();

Tutorial / docs

answered Jul 17 '12 at 13:08

Some Guy

15,854
10
58
67

Lorenz · Accepted Answer · 2012-07-17T15:14:01.687

0

<script type="text/javascript">
    function playVideo(sourceId, targetId) {
        if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
        if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
        targetId.innerHTML=sourceId.innerHTML;
        return false;
    }
</script>

<div id="6"></div>

<div id="1" style="display: none">
    <video width="320" height="240" controls="controls">
        <source src="movie1.mp4" type="video/mp4" />
        Your browser does not support the video tag.
    </video>
</div>

<div id="2" style="display: none">
    <video width="320" height="240" controls="controls">
        <source src="movie2.avi" type="video/avi" />
        Your browser does not support the video tag.
    </video>
</div>

<a href="#" onclick='return playVideo("1","6")'>Play Video 1</a>
<a href="#" onclick='return playVideo("2","6")'>Play Video 2</a>

What I did: I placed the two video elements within invisible divs. Those divs have ids (1 & 2) and the content of those divs (your video elements) are loaded into a third (visible) div with id 6.

edited Jul 17 '12 at 15:14

answered Jul 17 '12 at 13:12

Lorenz

1,263
9
20

Thanks for the very quick reply. The video doesn't actually stop, what happens is that when I click on video 2 nothing happens, that is when video 1 is playing or vis versa. The videos do have different tags. As you can see onclick='return playVideo("2","6")' – user1531828 Jul 17 '12 at 14:43
oh sorry I misunderstood the problem – Lorenz Jul 17 '12 at 14:58
Is there a way I can play the next video automatically after the first one is complete? – user1531828 Jul 19 '12 at 01:27
Look here: http://stackoverflow.com/questions/2741493/how-do-you-detect-html5-video-events – Lorenz Jul 19 '12 at 14:35

Play selected video

2 Answers2