Javascript/HTML5/CSS implementing video onclick

A

Aphro_EVO

Disciple
Hey Guys

I have a couple of images. If image 1 is clicked the player window should play videos/video-abc.mp4, if image 2 is clicked it should play videos/video-xyz.mp4. Currently I am using video tag(HTML5) like such

Code: 
<video width="320" height="215" controls="controls">

		  <source src="videos/mgs4review.mp4" type="video/mp4" />

		  <source src="movie.ogg" type="video/ogg" />

		  Your browser does not support the video tag.

		  </video>

Please note - its a simple website that i am building as a personal project, there's no back-end. I am simply using HTML5/CSS/Javascript. Seeking your help.

Thanks
 
Aphro_EVO said:
Hey Guys

I have a couple of images. If image 1 is clicked the player window should play videos/video-abc.mp4, if image 2 is clicked it should play videos/video-xyz.mp4. Currently I am using video tag(HTML5) like such

Code: 
<video width="320" height="215" controls="controls">

          <source src="videos/mgs4review.mp4" type="video/mp4" />

          <source src="movie.ogg" type="video/ogg" />

          Your browser does not support the video tag.

          </video>

Please note - its a simple website that i am building as a personal project, there's no back-end. I am simply using HTML5/CSS/Javascript. Seeking your help.

Thanks
Click to expand...

Code: 
<html>
    <head>
        <script type="text/javascript">
        function PlayVideo(aid,vid){
            document.getElementById(vid).style.display = "block";
            document.getElementById(vid).play();
            document.getElementById(aid).style.display = "none";
        }
        </script>
    </head>
    <body>
        <a id="anchor1" onclick="PlayVideo('anchor1','video1');"><img src ="1.jpg" alt="trail" /></a>
        <video  id="video1" controls="controls" style="display:none">
            <source src="new1.mp4"    type="video/mp4" />
            <source src="new1.ogg" type="video/ogg" />
            Your browser does not support the video element.
        </video>
        <a id="anchor2" onclick="PlayVideo('anchor2','video2');"><img src ="1.jpg" alt="trail" /></a>
        <video  id="video2" controls="controls" style="display:none">
            <source src="new2.mp4"    type="video/mp4" />
            <source src="new2.ogg" type="video/ogg" />
            Your browser does not support the video element.
        </video>
    </body>
</html>

Late already. Don't know how far it is useful for you.
But may help as reference to others.
 
Back
Top