JS自定义多媒体Video控制条（控制视频播放、进度、全屏案例）

最新推荐文章于 2024-06-13 18:23:52 发布
最新推荐文章于 2024-06-13 18:23:52 发布
阅读量3.2w 收藏 80
点赞数 32
分类专栏： js 文章标签： 多媒体 自定义视频控制条 Video对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41105030/article/details/86695625
版权
案例参考先来看一下一些视屏控件需求点击按钮实现视频的播放和暂停按钮切换全屏和退出全屏功能进度条和时间前期准备HTML DOM Video 对象文档图标字体库下载和文档案例目录HTML代码我们自定义实现控制条，所以video不要使用controls属性从其他网站视频播放，一般都是要自己实现控制条来达到我们想要的效果，使用video提供的控制条相关属性就很难修改，也...
摘要由CSDN通过智能技术生成

案例参考

先来看一下一些视屏控件
腾讯视屏控件
优酷

需求

  1. 点击按钮实现视频的播放和暂停
  2. 按钮切换全屏和退出全屏功能
  3. 进度条和时间

前期准备

HTML DOM Video 对象文档
图标字体库下载和文档
案例目录
所有目录

HTML代码

  1. 我们自定义实现控制条，所以video不要使用controls属性
  2. 从其他网站视频播放，一般都是要自己实现控制条来达到我们想要的效果，使用video提供的控制条相关属性就很难修改，也可能不搭配网站，不美观
    提供的控制条
  3. html代码
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义视频控制条</title>
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
	<div class="wrap">
		<h3>视频控制案例</h3>
		<div class="content">
			<div class="player">
				<video src="source/trailer.mp4">
				您的浏览器不支持 video 标签。
				</video>
				<div class="control">
					<div class="fa fa-play play_pause"></div>
					<div>
						<span class="progress"></span>
					</div>
					<div class="timer">
						<span class="progress_timer">00:00:00
最低0.47元/天 解锁文章
前端薛之谦...
关注
  • 32
    点赞
  • 踩
  • 80
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
JS中实现一个下载进度条及播放进度条的代码
10-16
主要介绍了JS中实现一个下载进度条及播放进度条的代码,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
h5 video 自定义控制条
ZSLOGIN的博客
10-10 1160
项目上有视频播放功能，但是视频控制条需要自定义，因为包含其他功能，近期整理了部分功能，自己重新写了控制栏，记录一下（实在没找到什么现成插件，可能还是我懒吧~）。目前只抽了进度条的组件，整个控制栏还没完全抽出，等我啥时候有时间了再慢慢搞。然后因为项目用的是elementUI，所以组件中也是直接用了里面的一些组件。结束，以后有机会再整理。
HTML5 媒体播放器 video、audio 自定义播放器进度条（上）
最新发布
m0_67793437的博客
06-13 684
当使用到 HTML5 媒体播放器（>），往往有许多自定义的需求，其中。
JS控制视频播放或暂停
m0_68954642的博客
06-05 3266
【代码】JS控制视频播放或暂停。
html5 video标签自定义控制条,h5 video标签 自定义控制条
weixin_39632327的博客
06-25 1066
/**首先将需要操作的元素保存为变量* 建议大家在做任何DOM操作的时候都先保存为一个变量* 防止频繁的寻找DOM节点，降低了页面性能，虽然现在设备好了，* 但是优化还是有必要的，点点优化带来的是更加良好的用户体验**/var loadBtn=$('#loadBtn');//刷新键var play=$('#playPausebtn');//播放暂停键var mutedBtn=$('#mutedBt...
关于html5 video全屏+自定义控制器
sinat_28906631的博客
11-30 9995
最近整了台nas机，准备自己写个视频网站搭建家庭媒体服务。临时记录下h5 video全屏+自定义控制器的实现的方式，之后会针对实现完整的h5 video播放控制写一些介绍和遇到的坑。 video标签中有controls属性，如果controls=“controls” 则会使用浏览器内嵌的控制器，当然这是最省力的，而且实际使用也没什么问题，但对于喜欢从轮子造起的猴子，还是喜欢全部自定义。 简单的说，...
Javascript实现Video视频进度条拖动无效
xuanqinzi的博客
07-05 3548
Javascript实现Video视频进度条拖动无效
vue项目中自定义video视频控制条的实现代码
10-15
关于自定义视频控制条的注意事项： 1. 使用`ref`属性可以方便地访问到Vue实例中的DOM元素，从而进行直接的操作，如播放、暂停、设置播放速度等。 2. 在处理倍速时，需要设置`playbackRate`属性来改变视频的播放速度...
Opencv实现视频播放与进度控制
08-28
Opencv不仅可以播放视频，还可以实现视频进度控制。通过createTrackbar()函数，我们可以在图像窗口上创建一个控制条，该控制条可以控制视频的播放进度。createTrackbar()函数的参数包括控制条的名称、图像窗口的名称...
自定义控制视频播放器网页模板
01-23
例如，可以添加自定义按钮，通过JavaScript控制视频的播放状态，并通过CSS定制这些按钮的样式。 其次，**视频播放器**的核心是HTML5的`<video>`元素。此元素提供了基础的视频播放功能，包括加载视频、播放、暂停、...
vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频、监听全屏事件
DarlingYL的博客
04-29 1万+
vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频、监听全屏事件
VIDEOJS使用
wadeltf的博客
02-13 922
1、引入js 2、填写标签 3、示例： &lt;div class="desc"&gt; &lt;div class="about-us"&gt; &lt;div class="about-us-content"&gt; &lt;h2 class="title"&
Video.js使用教程一（详解）
热门推荐
Mr.小强的博客
04-11 11万+
在项目上遇到类似于直播的场景所以需要前端播放后台的视频流这个问题，所以就此问题记录一下， 在上一篇文章中写到了怎样搭建nginx流媒体服务器以及怎样使用ffmpeg进行推流，那么现在就缺前端拉流这一部分，通过这两个天的辛勤劳动终于解决了，在这也希望分享给正在搞这个问题的童鞋们。 一、简单了解几种流 HLS流： 1、HLS是苹果公司实现的基于 HTTP 的流媒体传输协议，全称 HTTP Li...
video-js 库使用 自定义组件
Jioho的博客
05-09 3371
video-js 库使用 自定义组件 video-js 库 原始版的库：github/videojs vue 封装过的组件：npm/vue-video-player 这是一个非常棒的播放器，还兼容 hls 的直播流（m3u8）格式的等，还支持自定义组件，基本上满足播放器的很多功能了。 如果想了解直播的可以看下以前的文章 vue 项目进行直播视频 vue-video-player 后面更多会说自定义组件 说一说我的遇到的坑： 本来用播放器播放直播流 OK 了，可是 UI 和我说，播放器在回放的时候，希望像普
基于vue实现自定义video与audio播放器，支持拖拽进度条
阿嚏乱码的地方
06-14 1万+
在最近的vue项目中，有一个需求是实现自定义样式的video播放器和audio播放器。 在这里记录下实现的思路。 首先得熟悉video与audio原生标签中的API——传送门 这里需要用到API有： play；//开始播放音频/视频 pause;//暂停当前播放的音频/视频 loadedmetadata;//当浏览器已加载音频/视频的元数据时 timeupdate;//当目前的播放位置已更改...
video 满屏显示_微信video标签视频设置全屏属性
weixin_39534321的博客
12-20 3065
微信video标签视频设置全屏属性，支持安卓和ios系统的视频控制器和播放按钮隐藏和视频全屏，微信使用的内核是X5x-webkit-airplay="true"x5-video-player-type="h5"x5-video-orientation="h5"x5-video-player-fullscreen="true"preload="auto"style="object-fit:f...
videojs 自定义控件样式
weixin_33713350的博客
02-12 4745
2019独角兽企业重金招聘Python工程师标准>>> ...
JS控制HTML5媒体播放与暂停，及Chrome兼容的视频格式
WRian_Ban的小晴天
10-29 1万+
嗨！嗨！嗨！嗨起来正常播放最近写了个小Dome，在Chrome和微信上播放视频和音乐，并通过按钮控制他们的播放和暂停。 经测试，目前Chrome和微信对 Html5的video/audio Tag支持良好。 嵌入背景音乐<audio id="backAudio" src="h5bg2.mp3" autoplay="autoplay" preload="auto" loop="loop"></au
h5 video 带自定义控制条的和播放速度
06-13
好的，针对您的问题，我提供如下回答： 1. 带自定义控制条的H5视频播放器 HTML5的video标签提供了默认的视频播放控件，但是这些控件样式相对简单，如果需要自定义控制条，可以使用JavaScript和CSS来实现。下面是一个简单的示例代码： HTML代码： ``` <video id="myVideo" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </video> ``` JavaScript代码： ``` var video = document.getElementById("myVideo"); var playBtn = document.getElementById("playBtn"); var progressBar = document.getElementById("progressBar"); function togglePlay() { if (video.paused) { video.play(); playBtn.innerHTML = "Pause"; } else { video.pause(); playBtn.innerHTML = "Play"; } } function updateProgressBar() { var progress = (video.currentTime / video.duration) * 100; progressBar.style.width = progress + "%"; } video.addEventListener("play", function() { playBtn.innerHTML = "Pause"; }); video.addEventListener("pause", function() { playBtn.innerHTML = "Play"; }); video.addEventListener("timeupdate", updateProgressBar); playBtn.addEventListener("click", togglePlay); ``` CSS代码： ``` #myVideo { width: 640px; height: 360px; } #playBtn { background-color: #333; color: #fff; padding: 10px; border: none; border-radius: 5px; cursor: pointer; } #progressBarContainer { background-color: #ccc; height: 10px; margin-top: 10px; } #progressBar { background-color: #333; height: 100%; width: 0; } ``` 2. H5视频播放器的播放速度控制 HTML5的video标签提供了playbackRate属性，可以用来设置视频的播放速度。下面是一个简单的示例代码： HTML代码： ``` <video id="myVideo" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </video> <button id="slowBtn">Slow</button> <button id="normalBtn">Normal</button> <button id="fastBtn">Fast</button> ``` JavaScript代码： ``` var video = document.getElementById("myVideo"); var slowBtn = document.getElementById("slowBtn"); var normalBtn = document.getElementById("normalBtn"); var fastBtn = document.getElementById("fastBtn"); function setPlaybackRate(rate) { video.playbackRate = rate; } slowBtn.addEventListener("click", function() { setPlaybackRate(0.5); }); normalBtn.addEventListener("click", function() { setPlaybackRate(1); }); fastBtn.addEventListener("click", function() { setPlaybackRate(2); }); ``` CSS代码： ``` #myVideo { width: 640px; height: 360px; } button { background-color: #333; color: #fff; padding: 10px; border: none; border-radius: 5px; cursor: pointer; margin-right: 10px; } ``` 以上是我提供的回答，希望能对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值