[html5]视频播放器js控制vedio视频和分段播放

2016-10-13 00:16:48 点击量:36 标签: 收藏本文

HTML5 js控制vedio视频和分段播放，有需要的朋友可以参考下。

jQuery网页跨平台媒体播放器

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("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>CuPlayer.com</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="CuPlayer.com,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" onchange="playMedia(5,10)">第5秒开始-10秒时暂停 
        <br > 
        <br > 
        <button onclick="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; 
 
    //CuPlayer.com视频播放 
    function playMedia(startTime,endTime){ 
        //CuPlayer.com设置结束时间 
        _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); 
    } 
 
    //CuPlayer.com设置视频开始播放事件 
    function setCurrentTime(startTime){ 
        myVid.currentTime=startTime; 
        myVid.play(); 
    } 
 
    function timeupdate(){ 
        //CuPlayer.com因为当前的格式是带毫秒的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>

上一篇： [html5]Audio/Video的durationchange事件

下一篇： [微信]iOS苹果和微信中音频和视频实现自动播放的方法

ABOUT US

宜昌农人网络科技有限公司

我们是一家提供综合软件外包与弱电工程服务的技术公司。

业务涵盖定制软件、管理系统、网站、小程序、APP、系统集成、网络布线、监控安防、门禁、机房建设及长期技术维护。

公司地址：湖北省宜昌市伍家岗区东站二路6号三峡（宜昌）大数据产业园海洋馆二楼A203室