H5的新应用-指定视频的播放进度

时间：2022-06-22 10:17:16
<!DOCTYPE html>

<html>

    <head>

        <title>指定视频的播放进度</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <script type="text/javascript">

            //播放/暂停，采用同一个方法实现

            function playPause(){

                //获取视频DOM元素

                var myVideo = document.getElementById("myVideo");

                if (myVideo.paused)        //判断当前是否处于暂停状态

                  myVideo.play();        //调用play()方法开发播放

                else

                  myVideo.pause();        //调用pause()方法暂停视频播放

            }

            //从中间开始播放

            function playInMid(){

                //获取视频DOM元素

                var myVideo = document.getElementById("myVideo");

                //得到视频的总时长

                var duration = myVideo.duration;

                //得到当前的进度

                var currentTime = myVideo.currentTime;

                //判断是否暂停中

                if (!myVideo.paused)

                  myVideo.pause();

                //从总时长的一半的位置开始播放

                myVideo.currentTime = duration / 2;

                //继续播放视频

                myVideo.play();

            }

        </script>

    </head>

    <body style="text-align:center">

        <!-- HTML5新增的video标签，用于在网页里嵌入可以播放的视频 -->

        <video width="320" height="240" controls="controls" id="myVideo">

            <!-- 提供了两种格式的视频文件，以适应不同浏览器对video的支持 -->

            <source src="movie.mp4" type="video/mp4" />

            <source src="movie.ogg" type="video/ogg" />

            对不起，您的浏览器暂不支持video视频标签!

        </video>

        <br/>

        <input type="button" value="从头播放" onclick="playPause();"/>

        <input type="button" value="从中间播放" onclick="playInMid();"/>

    </body>

</html>

回到总目录

相关文章