HTML5-Video-Player onlick Play/Pause funktioniert nicht

ich spielen will/Pause, während Sie auf das Video Mein Code hier ist,HTML5-Video-Player onlick Play/Pause funktioniert nicht

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script type="javascript"> 
     $(document).ready(function() { 
      var myVideo = document.getElementById("video1"); 
      function playPause() 
      { 
      if (myVideo.paused) 
       myVideo.play(); 
      else 
       myVideo.pause(); 
      } 
      //your code here 
     }); 
     </script> 
    </head> 
    <body> 
     <video id="video1" onClick="playPause();" width="320" height="240" > 
      <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> 
     </video> 
    </body> 
</html>

wo habe ich fest? es zeigt einen Fehler wie ReferenceError: playPause is not defined

Quelle

2017-06-23 GanesH RahuL

haben Sie mehrere Probleme:

playPause definiert ist nur, nachdem die Seite geladen ist, aber Sie versuchen, es zu binden, vor. Sie können das $(document).ready() entfernen, um die Funktion zu definieren, bevor es bindend ist.
document.getElementById("video") kehrt undefined als <video> Element (es sei denn, es ist ein Tippfehler in Ihrem Beitrag ist) hat id video1

hier ein Arbeitscode lautet:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

     <script type="javascript"> 
     function playPause() { 
      var myVideo = $("#video1"); // or document.getElementById("video1"); 
      if (myVideo.paused) { 
       myVideo.play(); 
      } else { 
       myVideo.pause(); 
      } 

      // Your code here 
     } 
     </script> 
    </head> 
    <body> 
     <video id="video1" onClick="playPause();" width="320" height="240" autoplay="on"> 
      <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> 
     </video> 
    </body> 
</html>

Quelle

2017-06-23 12:34:35 pistou

Ihre Funktion playPause() ist hier in eine anonyme Funktion definiert.

function() { 
      var myVideo = document.getElementById("video"); 
      function playPause() 
      { 
      if (myVideo.paused) 
       myVideo.play(); 
      else 
       myVideo.pause(); 
      } 
      //your code here 
     }

Das bedeutet Playpause() 's Bereich ist nur diese anonyme Funktion. Das heißt, Sie können es nicht von wo immer Sie wollen nennen.

Sie sollten es definieren, bevor Sie versuchen, es aufzurufen. Wie folgt aus:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script type="javascript"> 
     function playPause(myVideo) 
      { 
      if (myVideo.paused) 
       myVideo.play(); 
      else 
       myVideo.pause(); 
      } 
      $(document).ready(function() { 
      var myVideo = document.getElementById("video"); 
      playPause(video); 
     }); 
     </script> 
    </head> 
    <body> 
     <video id="video1" onClick="playPause(document.getElementById("video"));" width="320" height="240" autoplay="on"> 
      <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> 
     </video> 
    </body> 
</html>

Quelle

2017-06-23 12:33:58

Es gibt mehrere Probleme in der Code. Die wichtigste ist, dass die ID des Videos sich von der unterscheidet, die Sie verwenden. Probieren Sie dieses Snippet aus.

  var myVideo = document.getElementById("video1"); 
 
      function playPause() 
 
      { 
 
      if (myVideo.paused) 
 
       myVideo.play(); 
 
      else 
 
       myVideo.pause(); 
 
      } 
 
      //your code here

<video id="video1" onClick="playPause();" width="320" height="240" autoplay="on"> 
 
      <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> 
 
     </video>

Quelle

2017-06-23 12:35:17

HTML5-Video-Player onlick Play/Pause funktioniert nicht

Antwort

Verwandte Themen