HTML5 js控制vedio视频和分段播放

最新推荐文章于 2024-09-18 21:30:16 发布

iteye_12028

最新推荐文章于 2024-09-18 21:30:16 发布

阅读量1.5k

点赞数

文章标签：前端 c# ViewUI

本文介绍了HTML5中vedio元素的JS操作，包括选择本地资源播放视频、设置和获取当前播放时间，监听video的timeupdate事件，以及如何实现视频的分段播放功能。

摘要由CSDN通过智能技术生成

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、监听