H5 video标签的使用 视频任意时间点开始和停止播放

https://www.cnblogs.com/ll-taj/p/6727743.html

http://blog.csdn.net/take_dream_as_horse/article/details/53422397

https://github.com/chuanzaizai/h5-video-demo

http://www.runoob.com/tags/ref-av-dom.html

https://blog.csdn.net/lihuang319/article/details/52335818


html5 video播放/暂停开关

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
<head>
<title>html5 video播放/暂停开关</title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<br />
<video id="video1" width="420">
<source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
</video>


</div>

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

</script>
</body>
</html>


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

<!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://qkhl.oss-cn-beijing.aliyuncs.com/%E7%BE%8E%E6%9C%AF%E7%BB%84%2F%E7%AC%AC%E4%B8%80%E9%9B%86.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>

猜你喜欢

转载自blog.csdn.net/zgpeterliu/article/details/81014535