En cliquant sur la vidéo pour le lire HTML5/CSS3

Salut les gars, je me demandais s'il est possible de cliquer sur une vidéo en HTML5 pour jouer? Ce que je veux dire est, sur la vidéo pas un bouton séparé pour arrêter et lire la vidéo, comme sur votre tube par exemple.En cliquant sur la vidéo pour le lire HTML5/CSS3

Vive

Voici mon 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>

Source

2014-09-01 Samantha

enregistrer l'événement, cliquez sur la vidéo:

myVideo.addEventListener('click', playPause);

dans ce cas, chaque clic appellera la fonction playPause().

Source

2014-09-01 11:05:29 dreamlab

J'ai essayé cette fonction myVideo.addEventListener ('c lécher ', playPause); Mais n'a pas semblé fonctionner :( – Samantha

suivez les instructions ici: http://stackoverflow.com/questions/5278262/click-the-poster-image-the-html5-video-plays – jmercier

vérifiez la console. erreur dans votre code – dreamlab

Ce lien peut être utile

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>

Source

2014-09-01 11:08:01 Hamix

Ceci peut être réalisé sans javascript tout simplement 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>

Source

2014-09-01 11:09:00 user3811714

En cliquant sur la vidéo pour le lire HTML5/CSS3

Répondre

Questions connexes