视频任意时间点开始和停止播放

最新推荐文章于 2024-07-11 14:37:18 发布

lihuang319

最新推荐文章于 2024-07-11 14:37:18 发布

阅读量1.3w

点赞数

本文链接：https://blog.csdn.net/lihuang319/article/details/52335818

版权

大家注意代码中的onclick , csdn把里面的o改成俄文编码的了，不能正常运行，请手动改成英文的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>video</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta charset="utf-8">
  </head>

<body>
    <div class="container" >
         <input type="button" value='10-13' onclick="playMedia(10,13)">第10秒开始-13秒时暂停

        <br >
        <br >
        <button onclick="playMedia(50,null)" type="button">从第50秒开始播放到结束</button>
        <input type="text" id="showTime"/>
        <br >
        <br >
        <video id="video1" autoplay="autoplay" controls=true src='http://www.amdcu.net/admin/data/admin/lm_data/lm_23781/story_content/video_5uVjEQZCagr_30_48_720x406.mp4'>
        </video>
    </div>

</body>

<script>

    var myVid=document.getElementById("video1");
    myVid.addEventListener("timeupdate",timeupdate);

    var _endTime;

    //视频播放
    function playMedia(startTime,endTime){
        //设置结束时间
        _endTime = endTime;
        myVid.currentTime=startTime;
          myVid.play();
    }
    
    function timeupdate(){
        //因为当前的格式是带毫秒的float类型的如：12.231233，所以把他转成String了便于后面分割取秒
        var time = myVid.currentTime+"";
        document.getElementById("showTime").value=time;
        var ts = time.substring(0,time.indexOf("."));
        if(ts==_endTime){
            myVid.pause();
        }
        
    }

</script>
</html>