video 视屏播放器详细控制

原创 已于 2023-04-25 18:26:51 修改 · 1.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#video #javascript

于 2023-04-24 16:40:02 首次发布
本文介绍了如何利用JavaScript API详细控制HTML5 video播放器。包括监听canplay、play、pause事件，格式化视频总时长，设置和更新当前播放时间，实现全屏播放，创建播放进度条和加载进度条，以及视频快进和音量调节功能。通过类型检查和事件处理，确保了播放器的交互体验。

介绍

canplay、play、pause是video提供的API，在视频加载完成后需要设置视频的总时长duration也是来源于自身的API但是需要格式化时间

设置当前播放时间通过自身API，currentTime

function playing(){
   
   
	#id.innerHTMl = 格式化时间函数(video.currentTime)
}

需要一个定时器去动态的更新这个当前时间值，在方法的最外层定义 let timer，方便释放定时器

格外注意用到ts的类型检查，制定变量的类型，可以结合IDE友好的提示，比如某一个video某个属性记不清了，IDE能很好的提示

最低0.47元/天 解锁文章
vue获取video视频时长和当前播放进度时间，解决出现NaN或者undefined的问题
seeeeeeeeeee的博客
12-16 1万+
video标签添加canplay事件 canplay：视频准备就绪可以播放的时候触发的事件 <video src="../video/1.mp4" controls="controls" width="100%" autoplay @canplay="getVidDur()" id="myvideo" ></video> js 这里
video标签属性总结
qq_35227244的博客
05-23 6972
导读：video标签在H5页面上是常用的播放视频的标签，有很多新属性，在这里总结一下，作video的日常熟悉和平时使用时的翻阅查询之用。视频格式有.mp4 .webm .ogg这几种格式的， 在浏览器上支持的最好的是.mp4所以推荐使用的视频播放源。
video 标签 各种属性及所有事件监听
qiuweifan的博客
12-13 1504
网页中的video 属性和事件，用于计算观看视频的时长，其他用法备存。
控制视频播放
weixin_34209406的博客
02-03 192
var myVideo = document.getElementById("video");//播放器 function playPause(){ if(myVideo.paused) { myVideo.play(); } else { myVideo.pause...
opencv:视频播放控制
qq_29450163的博客
02-07 308
/** *通过添加一个全局变量来表示滚动条位置并且添加一个回调函数更新变量以及重新设置视频读入位置。 */ #include "highgui.h" #include "cv.h"int g_slider_position = 0; CvCapture* g_capture = NULL;void onTrackbarSlide(int pos) { //设置以帧数来设置读入位置（FRAME
libvlc实现的视屏播放器
10-07
为了显示视频，我们需要设置一个窗口作为视频渲染目标，这通常通过`libvlc_video_set_callbacks()`和自定义的回调函数来完成，这些回调函数负责处理视频帧的绘制。 MFC框架用于构建用户界面，可以创建按钮、滑块等...
VC H264格式视屏播放器源码
05-01
此外，播放器可能还需要处理其他功能，如播放控制（暂停、快进、快退）、音视频同步、字幕支持等。音视频同步是播放器开发中的一个挑战，因为它涉及到不同数据流（音频和视频）的精确同步。对于字幕支持，可能需要...
AVProVideo播放器【进度】显示和【跳播】控制
穿裤子的云
11-18 2692
AVProVideo 组件显示进度条和跳播......
视屏组件播放器Vue3-video-play
最新发布
09-29
Vue3-video-play是2024年可用的Vue3视频播放器组件，支持video原生所有Attributes，也支持m3u8(hls)播放 [^1][^2][^4]。 ### 安装方式 - npm安装：`npm i vue3-video-play --save` - yarn安装：`yarn add vue3-...
视频播放控制
棺材深處
04-13 1674
题目：实现 AVI 播放器播放视频，并通过加入一个滚动条来实现对视频进行快速拖动 1.通过调用 cvCreateTrackbar() 来创建一个滚动条，并且通过设置参数确定滚动条所属于的窗口，为了获取所需的功能，只需要提供一个回掉函数。 2.实现滚动条随着视频播放自动移动 #include "opencv3.h" #include "cv.h" #include "highg
html video播放器
01-21
html结合video制作简易视频，完成了基本的视频操作流程
JS控制Video播放器
liangmaxmin的博客
10-31 2901
原文链接 思路： 一.首先监听触发事件。 比如：向上键对应的keyCode为38，向下键对应的keyCode为40，向左键对应的keyCode为37，向右键对应的keyCode为39，空格键对应的keyCode为32， 其他的keyCode可以通过 console.log(“keyCode:” + event.keyCode); 打印获取。 二.调用video标签对应的属性以及方法，去设置去获取 获取视频元素：var videoElement = document.getElementById(“video
opencv视频播放控制
qq_33200959的博客
07-15 694
cvCreateTrackbar() 要实现在视频播放时进行快速移动，通过添加滚动条实现，在opencv中调用cvCreateTrackbar()就能创建滚动条,通过设置参数可以确定滚动条所属窗口。 #include &lt;opencv/cv.h&gt; #include &lt;opencv/highgui.h&gt; using namespace std; //滚动条slide...
Video 标签播放及控制视频
cc的博客
01-13 2542
Video 是 HTML5 中新增的标签，使用 Video 标签可以播放 ogg、mp4 、webm 等格式的视频，Video 标签的引入，减少前端页面对 Flash 动画的依赖。 不同的浏览器支持的视频格式可能不同，以下是摘自 W3School 各个浏览器对三种视频格式的支持情况 在 Video 中嵌入视频 <video src="/movie.mp4" controls="contro...
opencv入门(简单的视频播放控制)
bailingniao777的博客
10-09 533
视频播放控制 通过加入一个滚动条在视频播放时进行快速拖动 HighGUI工具包不仅提供了一些简单的显示函数，还包括一些图像和视频控制方法。其中一个就是滚动条，可以方便地从视频的一帧调到另外一帧。可以通过cvCreateTrackbar()来创建一个滚动条，并且通过设置参数确定滚动条所属窗口。下面是添加滚动条到基本浏览窗口的程序，拖动滚动条，函数onTrackSlide()便被调用并被传入滚动条新
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值