js控制vedio视频和分段播放

最新推荐文章于 2024-04-23 02:00:49 发布

清木Moyu

最新推荐文章于 2024-04-23 02:00:49 发布

阅读量3.5k

点赞数

文章标签： html5 html 视频 javascript

HTML5 vedio常用的js操作

1、选择本地资源播放视频

html:

<input type="file" id="file" οnchange="setMediaFile()">
<video id="video1" autoplay="autoplay" controls="none" ></video>

js:

var myVid=document.getElementById("video1");

function setMediaFile() {
   var file = document.getElementById('file').files[0];
   if(!file){
    alert("Please upload file.");
    return false;
   }
   var url = (window.URL) ? window.URL.createObjectURL(file) : window.webkitURL.createObjectURL(file);
   document.getElementById("video1").src = url;
}

2、设置，和获取当前视频播放的时间

利用currentTime来设置或获取当前时间
获取视频当前播放时间：myVid.currentTime
设置视频当前播放时间：myVid.currentTime="10"

3、监听视频播放事件

给视频添加timeupdate事件

myVid.addEventListener("timeupdate",timeupdate);
    function timeupdate(){
        //do something...
    }

4、综合事例
选择视频，指定设置视频播放开始时间，和结束时间，即分段播放视频

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>tttt</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta charset="utf-8">
  </head>

<body>
    <div class="container">
        <input type="file" id="file" οnchange="playMedia(5,10)">第5秒开始-10秒时暂停
        <br >
        <br >
        <button οnclick="setCurrentTime(7)" type="button">从第7秒开始播放</button>
           
        <input type="text" id="showTime"/>
        <br >
        <br >
        <video id="video1" autoplay="autoplay" controls >
        </video>

    </div>

</body>

<script>

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

    var _endTime;

    //视频播放
    function playMedia(startTime,endTime){
        //设置结束时间
        _endTime = endTime;
       var file = document.getElementById("file").files[0];
       if(!file){
        alert("请指定视频路径");
        return false;
       }
       var url = (window.URL) ? window.URL.createObjectURL(file) : window.webkitURL.createObjectURL(file);
       myVid.src = url;
       myVid.controls = true;
       setTimeout("setCurrentTime('"+startTime+"')",200);
    }

    //设置视频开始播放事件
    function setCurrentTime(startTime){
        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>

清木Moyu

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js控制vedio视频和分段播放

HTML5 vedio常用的js操作1、选择本地资源播放视频html:<input type="file" id="file" onchange="setMediaFile()"><video id="video1" autoplay="autoplay" controls="none" ></video>js:var myVid=document.getElementById("video
复制链接

扫一扫