Fatal编程技术网
  • javascript/
  • Javascript HTML5视频播放器单击播放/暂停不工作

Javascript HTML5视频播放器单击播放/暂停不工作

javascript html

Javascript HTML5视频播放器单击播放/暂停不工作,javascript,html,html5-video,Javascript,Html,Html5 Video,我想在单击视频时播放/暂停 我的代码在这里 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="javascript"> $(document).ready(function () {

我想在单击视频时播放/暂停 我的代码在这里

<!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>


$（文档）.ready（函数（）{
var myVideo=document.getElementById（“video1”）；
函数playPause（）
{
如果（myVideo.paused）
myVideo.play（）；
其他的
myVideo.pause（）；
}
//你的代码在这里
});
我卡在哪里了？它显示了类似于

ReferenceError:未定义播放暂停

函数playPause（）在此定义为匿名函数

function () {
            var myVideo = document.getElementById("video");
            function playPause()
            {
            if (myVideo.paused)
              myVideo.play();
            else
              myVideo.pause();
            }
            //your code here
        }
这意味着playPause（）的范围只是这个匿名函数。这意味着你不能从任何你想要的地方呼叫它

您应该在尝试调用它之前定义它。就像这样：

<!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>


功能播放暂停（myVideo）
{
如果（myVideo.paused）
myVideo.play（）；
其他的
myVideo.pause（）；
}
$（文档）.ready（函数（）{
var myVideo=document.getElementById（“视频”）；
播放暂停（视频）；
});
您有几个问题：

  • playpaise
    仅在加载页面后定义，但您试图在加载之前绑定它。您可以在绑定函数之前删除
    $（document）.ready（）
    ，以定义函数

  • document.getElementById（“video”）
    返回
    未定义的
    （除非您的帖子中有输入错误），因为
    元素具有id
    video1
以下是工作代码：

<!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>


函数playPause（）{
var myVideo=$（“#video1”）；//或document.getElementById（“video1”）；
如果（myVideo.paused）{
myVideo.play（）；
}否则{
myVideo.pause（）；
}
//你的代码在这里
}
代码中有几个问题。主要问题是视频的id与您正在使用的id不同。试试这个片段

var myVideo=document.getElementById（“video1”）；
函数playPause（）
{
如果（myVideo.paused）
myVideo.play（）；
其他的
myVideo.pause（）；
}
//您的代码在此