原生js video获取当前视频时间进度和视频总时长

<div id="toolist"><!-- video测试 --><video src="./resource/VID_0005.3gp" autoplay="autoplay" loop controls="controls " id="video-active"><source type="video/mp4" /><source type="video/webm" /></video><div id="progress"><div id="bar"></div></div><h3><h3 id="text-progress">0%</h3></h3><b id="beginTime">0.00</b><b id="lastTime">0.00</b></div>

myVid = document.getElementById("video-active");
var bar = document.getElementById("bar");
var bgTime = document.getElementById("beginTime");
var elem = document.getElementById("text-progress");
ltTim.innerHTML = myVid.duration.toFixed(2) + "s";bgmove();
move();
function bgmove() {var long = 0.00;var id = setInterval(frame, 10);function frame() {// video自带属性myVid.duration获取时长if (long >= myVid.duration) {long = 0.00;} else {long += 0.01;if (long >= myVid.duration) {long = 0.01}bgTime.innerHTML = long.toFixed(2) + 's';}}
}function move() {var width = 6;var id = setInterval(frame, 10);function frame() {if (width >= 100) {width = 5;} else {width += (1 / myVid.duration)if (width >= 100) {width = 100}bar.style.width = width + '%';elem.innerHTML = Math.floor(width) + '%';}}}

原生js video获取当前视频时间进度和视频总时长相关推荐

vue 视频时间进度条组件
vue 视频时间进度条组件有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件实现思路: 1,24h的时间刻度线总宽度为12960px 2,点击24h线的某一点,获取这 ...
vue 视频时间进度条组件-使用npm组件
vue 视频时间进度条组件有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件组件已上传到npm上,npm i as-time-line下载安装即可,最少需要1.2.0 ...
iframe标签解析腾讯视频链接的获取不到总时长的解决方案(Txp.play.js)
记一次项目总结: 腾讯视频(Txp.play.js) <iframe> API 的使用由于视频URL是来自腾讯视频,所以会出现一个这样的情况:无法获取到用户所看的该视频的总时长,那麽就得 ...
原生js——无法获取元素高度的的问题
原生js--无法获取元素高度的的问题今天遇到了xxx.style.width无法获取元素宽度的问题,原来一直没有注意到这个小细节: 1)如果width:150px:是写在 css 样式表(外链式)里 ...
原生js firstChild 获取元素的第一个节点兼容问题（需求获取元素节点）
原生js firstChild 获取元素的第一个节点问题 firstChild 获取当前元素节点下的第一个子节点. 获取到的子节点可能是元素节点,但编程中更可能是注释节点或文本节点. 没有子节点则返回 ...
uniapp 获取当前视频播放时长，视频总时长
html代码 <video controls id="myvideo" custom-cache="false" :src="videoUrl& ...
Android 如何获取视频的总时长
在做视频的时候,往往需要获取视频的总时长,比较常用的就是用getDuration()方法获取,但是在获取的时候总是显示获取到的值为-1,在网上找答案的时候,大多解决方案写的都比较简略,对于我这样入门没 ...
JS获取音频的总时长，解决Audio元素duration为NaN || Infinity 问题
当我们在加载一个线上mp3地址或者获取audio的duration的时候,会发现有拿到duration是Infinity的情况,这时如果我们动态的展示录音时间时候就会有问题.首先明确一下这是chrom ...
ffprobe 获取视频每秒总帧数或视频总帧数及视频总时长
获取每秒总帧数: ffprobe -v 0 -of csv="p=0" -select_streams V:0 -show_entries stream=r_frame_rate ...

原生js video获取当前视频时间进度和视频总时长

原生js video获取当前视频时间进度和视频总时长相关推荐

最新文章

热门文章