javascript - HTML5 video player onclick playpause not working

I want to play/pause while click on the video My code is here,

<!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=".mp4" type="video/mp4">
        </video>
    </body>
</html>

where did I stuck? it shows error like

ReferenceError: playPause is not defined

I want to play/pause while click on the video My code is here,

<!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./html/movie.mp4" type="video/mp4">
        </video>
    </body>
</html>

where did I stuck? it shows error like

ReferenceError: playPause is not defined

Share edited Apr 5, 2018 at 17:39 Cœur 38.8k25 gold badges205 silver badges277 bronze badges asked Jun 23, 2017 at 12:26 GanesH RahuL 8231 gold badge11 silver badges21 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

You have several issues:

playPauseis defined only after the page is loaded, but you're trying to bind it before. You can remove the $(document).ready() to define the function before it's binding.
document.getElementById("video") returns undefined (unless it is a typo in your post) as your <video> element has id video1

Here is a working code:

<!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./html/movie.mp4" type="video/mp4">
        </video>
    </body>
</html>

Your function playPause() is here defined into an anonymous function.

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

That means playPause()'s range is only this anonymous function. That means you can't call it from wherever you want.

You should define it before trying to call it. Like that :

<!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./html/movie.mp4" type="video/mp4">
        </video>
    </body>
</html>

There are several issues in the code. The main is the id of the video is different from the one you are using. Try this snippet.

            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./html/movie.mp4" type="video/mp4">
        </video>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - HTML5 video player onclick playpause not working - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)