Clicking on video to play it HTML5/CSS3

Question

Hi there guys just wondering if it is possible to click a video in HTML5 for it to play?

What I mean is, on the video not a separate button to stop and play the video, like on you tube for example.

Cheers

Here is my code..

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br> 
  <video id="video1" width="1250">
    <source src="pjds.mp4" type="video/mp4">
    <source src="pjds.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div> 

<script> 
var myVideo = document.getElementById("video1"); 

function playPause() { 
    if (myVideo.paused) 
        myVideo.play(); 
    else 
        myVideo.pause(); 
} 

function makeBig() { 
    myVideo.width = 1250; 
} 

function makeSmall() { 
    myVideo.width = 420; 
} 

function makeNormal() { 
    myVideo.width = 560; 
} 
</script>

score 0 · Answer 1 · answered Sep 01 '14 at 11:05

0

register the click event on the video:

myVideo.addEventListener('click', playPause);

in this case, every click will call the playPause() function.

answered Sep 01 '14 at 11:05

dreamlab

3,321
20
23

I tried this function myVideo.addEventListener('click', playPause); But didn't seem to work :( – Samantha Sep 01 '14 at 11:07
follow instructions here : http://stackoverflow.com/questions/5278262/click-the-poster-image-the-html5-video-plays – jmercier Sep 01 '14 at 11:08
1

check the console. maybe you have an error in your code. – dreamlab Sep 01 '14 at 11:14
1

and add +1 for dreamlab awnser if it's ok ^^ – jmercier Sep 01 '14 at 11:18

score 0 · Answer 2 · answered Sep 01 '14 at 11:08

This link may be useful

simple video player

HTML

<div class="mediaplayer">
        <video poster="http://corrupt-system.de/assets/media/sintel/sintel-trailer.jpg" controls preload="none">
            <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4" />
            <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm" type="video/webm" />
        </video>
</div>

score 0 · Answer 3 · answered Sep 01 '14 at 11:09

This can be achieved without javascript just plain HTML5

<html> 
<body> 

<div style="text-align:center"> 
  <video id="video1" width="420" controls>
    <source src="pjds.mp4" type="video/mp4">
    <source src="pjds.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div> 
</body> 
</html>

Clicking on video to play it HTML5/CSS3

3 Answers3