用JS原生来设计video控件（controller）

于 2024-12-17 11:16:51 发布
阅读量182 收藏
点赞数 2
文章标签： 视频 javascript html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZYK187/article/details/144529354
版权

这篇文章主要是为大家分享一下如何制作html video标签控件，这个功能并不难实现，所以大家要认真看代码， 只做了全屏功能 可以根据自己需求自己添加～～

将代码下载后，直接打开即可

代码仓库地址：https://gitcode.com/ZYK187/20241217-video/overview

html5 video标签 在ios 和android 修改 控制条
u013558123的博客
03-03 3276
最近开发的项目，需要在手机端根据地图定位，加载相应的视频，每个定位点有多个视频。jsp页中使用，在竖屏的情况下，一行需要放两视频。这样的话控制条，不会缩放，就显得控制条特别大，样式很难看。于是就去掉controls="controls"属性。简单测试了下，在苹果5上面，还有华为g7上面都是没问题的，点击视频的时候能正常播放。但是，也有个别的用户反应点击没反应。于是给video标签添加点击事件，点...
【HarmonyOS NEXT】webview如何实现H5让video视频自动播放
最新发布
Mayism123的博客
06-19 447
可以看下web的mediaPlayGestureAccess属性，将H5中的视频设置为自动播放，然后将mediaPlayGestureAccess设置为false。webview如何让H5页面的video视频自动播放，是H5页面的，不是原生web页面的。webview / H5 / 视频 / 自动播放。
自定义H5视频播放器的控件
07-27
利用H5的video提供的属性以及相应的API实现自定义播放器控件
自定义视频-原生js
qiu_miaomiao的博客
06-12 479
<div class="mod-public-videoplay" id="modPublicVideoPlay"> <video id="html5VideoPlayer" width="100%" height="100%" src="testvideo.mp4" autoplay="autoplay" loop="loop" > 您的浏览器不支持 ...
JS控制Video播放器
liangmaxmin的博客
10-31 2786
原文链接 思路： 一.首先监听触发事件。 比如：向上键对应的keyCode为38，向下键对应的keyCode为40，向左键对应的keyCode为37，向右键对应的keyCode为39，空格键对应的keyCode为32， 其他的keyCode可以通过 console.log(“keyCode:” + event.keyCode); 打印获取。 二.调用video标签对应的属性以及方法，去设置去获取 获取视频元素：var videoElement = document.getElementById(“video
videojs创建control-bar组件,实现点击播放下一视频
weixin_44054403的博客
12-08 6574
目录引言实现Control-Bar中的组件编写play-next类编写auto-play-next类修改css样式在control-bar中配置自定义组件应用自定义control-bar组件结语 引言 上一篇文章:为videojs添加自定义组件 已经介绍了在开源网页视频播放器videojs中添加简单的titleBar组件. 在实际使用中,我们可以发现,在大部分视频网站,都有点击播放下一集和自动连续播放两个选项.这篇文章将通过这两个功能的开发,介绍如何开发control-bar中的组件. 实现Control
使用videojs+vue2+elementui自定义播放器控件
weixin_52060703的博客
11-21 1万+
用elementui的滑块实现视频自定义的进度条，包括一点videojs的初使用
cocos2d ios平台 video视频层放置ui
qq_33302509的博客
04-06 3144
cocos2d video视频层放置ui
android html5播放器,纯JS 打造HTML5+APP 专属 VIDEO 视频播放器,支持记忆续播和缓冲进度条,音量调节和亮度调节,支持 android/ios...
weixin_39765588的博客
05-26 821
基础开发工具： HBuilder X附件: 是 HBuilder 工程纯JS改写 video 支持Android / IOS /播放。支持播放视频格式：.mp4.webm.m3u8.mpd.flv如果你是用于直播使用的，建议你不用购买， 这个m3u8接收直播推流不太稳定，有些安卓机型可能不兼容， 只建议当普通播放器使用，例如mp4, m3u8格式不是直播的视频，都可以正常使用。基础功能：支持： ...
Video标签事件与属性
weixin_30873847的博客
06-22 1637
事件与属性 属性 描述 audioTracks 返回可用的音轨列表（MultipleTrackList对象） autoplay 媒体加载后自动播放 buffered 返回缓冲部件的时间范围(TimeRanges对象) controller 返回当前的媒体控制器（MediaController对象） controls 显示播控控件 cross...
webVideoCtrl.js海康威视摄像vue引用脚本
03-14
vue集成原版的webVideoCtrl.js会出现报错，该资源修改了部分源码，用于支持vue，使用代码前请参考博客：https://blog.csdn.net/yushi6310/article/details/88549363
video对象
qq_41672008的博客
10-22 507
video对象 这一次来聊聊video对象，算是对video标签更深的理解 可以去看以下地址： https://www.w3school.com.cn/jsref/dom_obj_video.asp 因为太多，就挑重要的说一说： autoplay：设置或返回是否在就绪（加载完成）后随即播放视频，说白了就是要不要一上来立马就播放，不过大多数播放器都不会添加这个属性 controls：设置或返...
海康威视控件覆盖dom元素问题下拉菜单被覆盖
从零开始之前端逆袭
12-16 2032
描述：引入的海康控件挡住了dom元素 原因：海康控件不属于dom元素，所以无法通过设置 z-index来改变 解决的办法： 可以在菜单显示的时候，将海康控件裁掉一部分裁掉 if (window.oWebControl) { let heightPart = Height.get('q' + String(menuId-1)) let cutPart = document.getElementById('q' + String(menuId-1)) let start
webVideoCtrl.js
TylorMin的博客
09-03 3002
!function(e){if(!e.WebVideoCtrl){var t=function(){function t(){this.id=this.createUUID()}var r="100%",s="100%",o="",i="",a={szContainerID:"",szColorProperty:"",szOcxClassId:"clsid:FDF0038A-CF64-4634-8...
重写video标签的控制条（待更新汇总）
默默的小跟班的博客
08-27 1155
JS自定义多媒体Video控制条（控制视频播放、进度、全屏案例）https://blog.csdn.net/weixin_41105030/article/details/86695625?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-Blo
video 属性和事件用法大全
CherishL_的专栏
09-26 1083
video 属性 <!-- video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP4，WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> <video src="test.mp4" c...
js模拟video的controls效果一
二流码农的博客
11-11 2425
html: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"/&gt; &lt;link rel="stylesheet" href="videoCon.css"&gt;
如何用js来控制video播放器
qq_42181069的博客
05-25 2万+
在文章开始前，先给大家看下效果图：在文章开始，给大家先分享一下这个思路：js来控制视频的播放：1、所有的方法和属性都是由video这个dom元素来调用，如果换成其他的则不能实现2、video.paused==true3、video.play();4、video.pause();5、video.duration;video.currentTime();6、video.ontimeUpdate=fun...
Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器
热门推荐
蒋川@卡拉云
03-29 4万+
Video.js 是最强大的网页嵌入式 HTML 5 视频播放器的组件库之一，也是大多数人首选的网页视频播放解决方案。复杂的网页视频渲染，在引入 Video.js 后，轻松解决。本教程手把手教你搭建一套基于 Vue 的 Video.js 视频播放页。 跟随本教程学习，最终你可以自己搭建一套可以播放本地视频文件及网络流媒体的网页视频播放器。学习如何修改 video.js 的默认样式来实现播放按钮自定义形状(圆形)、居中及播放时间的显示与否， 如何播放 m3u8 格式，以及如何使用 video 的属性、事件及
Chewie: Flutter视频播放器的封装与美化
chewie是基于Flutter开发的视频播放器插件，它提供了一个高级封装，使得视频播放控件更加易于使用，并且支持多种定制化选项。开发者可以直接利用video_player插件作为底层，而chewie则将它包裹在一个友好的Material...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值