html video 自定义控制栏（移动端应用）

最新推荐文章于 2024-06-13 18:23:52 发布
最新推荐文章于 2024-06-13 18:23:52 发布
阅读量8.7k 收藏 13
点赞数 22
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010792039/article/details/79157806
版权

<!DOCTYPE HTML>
<html>
<meta charset="UTF-8">
<title>

</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">


<head>
<style>
#box {
width: 100%;
height: 40px;
background: #eeeeee;
border-radius: 10px;
<!--圆角-->box-shadow: 1px 1px 2px 2px #232;
<!--阴影-->border: 1px solid #ff0000
}

.play {
<!--用css画三角形-->width: 0px;
height: 0px;
float: left;
margin-top: 10px;
width: 10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 16px solid #666666;
border-bottom: 10px solid transparent;
}

.pause {
<!--用css画两条竖线-->width: 6px;
height: 18px;
border-left: 4px solid #666666;
border-right: 4px solid #666666;
float: left;
margin-top: 10px;
width: 10px;
}

.time {
color: #666666;
float: left;
width: 8%;
margin-top: 12px;
font-size: 14px;
margin-left: 10px;
height: 18px;
}

#progress {
float: left;
width: 55%;
height: 8px;
background: #fff;
box-shadow: 1px 1px 2px 2px #232;
border-radius: 5px;
margin-top: 16px;
margin-left: 16px;
position: relative;
}

#bar {
width: 10%;
height: 100%;
background: #ccc;
border-radius: 3px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}

#control {
width: 17px;
height: 17px;
position: absolute;
border-ra

最低0.47元/天 解锁文章
秃子编程
关注
  • 22
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 video标签自定义控制条
i伤心鱼的博客
07-11 3万+
最近做项目时要用到播放视频，采用的是h5的video标签，但是控制条不好看，所以想着自己做一套控制条！
HTML5-Custom-Video-Controls:自定义html视频控件的示例，而不是默认控件的示例
04-30
HTML5-自定义视频控件 这是我一个人开始的项目，因为我找不到很多有关HTML5视频上的自定义控件的资源，而是希望帮助那些寻求帮助的人。 乔-TheBro :)
HTML自定义菜单栏形状,video自定义菜单栏.html
weixin_39769627的博客
06-07 416
Documenta{text-decoration: none;}.videoBox{position: relative;}.videoB{position: relative;}.videoB:before {content: "\e650";font-size: 70px;color: #efefef;position: absolute;left: 50%;top: 50%;transfo...
HTML5 媒体播放器 video、audio 自定义播放器进度条（上）
最新发布
m0_67793437的博客
06-13 734
当使用到 HTML5 媒体播放器（>），往往有许多自定义的需求，其中。
html5 video标签自定义控制条,h5 video标签 自定义控制条
weixin_39632327的博客
06-25 1076
/**首先将需要操作的元素保存为变量* 建议大家在做任何DOM操作的时候都先保存为一个变量* 防止频繁的寻找DOM节点，降低了页面性能，虽然现在设备好了，* 但是优化还是有必要的，点点优化带来的是更加良好的用户体验**/var loadBtn=$('#loadBtn');//刷新键var play=$('#playPausebtn');//播放暂停键var mutedBtn=$('#mutedBt...
控制面板的小应用程序
萤火虫之光
09-11 2998
控制面板的小应用程序 东北大学 张春明 张春丽 姜绍飞 01-4-23 上午 11:35:13 在Windows操作
vue-video:vue移动端简单自定义控件播放器
05-13
3. **自定义控件**：为了实现移动端友好的用户体验，"vue-video"提供了自定义的控制条组件，包括播放/暂停按钮、进度条、音量控制等。这些控件通常需要响应触摸事件，确保在手机和平板上的操作流畅。Vue的事件绑定...
自定义美化HTML5 video视频播放器界面样式
07-14
总结起来，自定义美化HTML5 `video` 视频播放器界面样式需要结合HTML、CSS和JavaScript技术，通过创建自定义的控制元素、应用个性化的样式以及实现交互功能，从而打造出一款与网站整体风格一致且用户体验优秀的视频...
html5移动端单视频播放代码
04-06
总结来说，HTML5移动端单视频播放涉及的关键技术包括`<video>`标签、视频格式支持、跨平台兼容性以及播放器的自定义和控制。Zy Media JS插件通过提供统一的接口和优化的移动端适配，简化了这些任务，让开发者能更...
移动端HTML5登录注册精美界面
02-07
在移动互联网快速发展的今天，HTML5技术已经成为构建跨平台、响应式网页应用的重要工具，尤其在移动端登录注册界面的设计上，HTML5提供了丰富的功能和出色的用户体验。本资源包含的"移动端HTML5登录注册精美界面...
60多套html5移动端模板
06-09
HTML5移动端模板是一系列预先设计和编码的网页结构，它们为开发者和设计师提供了一个快速构建移动网站或应用的基础。这些模板通常包含响应式布局，能够适应不同尺寸的屏幕，从智能手机到平板电脑都能良好显示。在"60...
HTML 视频（Video）
12-14
HTML 视频（Video） 在 HTML 中播放视频的方法有很多种。 HTML视频（Videos）播放 实例     问题以及解决方法 在 HTML 中播放视频并不容易！ 您需要谙熟大量技巧，以确保您的视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。 在本章，软件开发网为您总结了问题和解决方法。 使用 标签 标签的作用是在 HTML 页面中嵌入多媒体元素。 下面的 HTML 代码显示嵌入网页的 Flash 视频： 实例   问题 HT
videojs视频可拖动播放与不可拖动播放
12-22
videojs视频可拖动播放与不可拖动播放
html视频怎么自动显示控件,Video控件（自定义播放栏）
weixin_30654137的博客
05-30 4819
完成了这样一个自定义的视频播放栏以及视频暂停页视频播放页视频暂停页.png昨天暂时只做了视频的播放与暂停功能，实时运动心率检测以及视频运动难度这块等接口这次关于的操作中，主要用到的是关于视频的ontimeupdate函数、video.currentTime(视频当前播放时间)、以及video.duration(视频总长)。具体代码：HTML部分首先 创建一个video控件其中autoplay说明视...
自定义video控制栏，移动端可行
weixin_33759269的博客
07-19 491
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>预览页</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximu...
JavaScript案例：H5 video自定义控制器
袁成新（Chauncey Yuan）
12-15 1524
video作为h5中新增的标签，定义视频，比如电影片段或其他视频流。 video在各个浏览器中的默认控件都不太一样，还不太好看，所以就得自定义 分享一个自己写的video控件，实现功能包括暂停/播放、进度条控制、音量调节、时间显示、全屏 全屏 html <div class="video"> <!-- 视频播放区 --> <video id="...
html video在手机上按钮位置问题,video在安卓手机上，怎么设置同层播放，还有怎么设置隐藏控制播放按钮...
weixin_34304211的博客
06-04 910
我用官方的实例写了个播放VIDEO的例子，然后再上面加了一层UI，目的是想点击UI，然后播放我的视频。我在IOS端发现可以正常点击，正常播放，但是在安卓微信打开不支持同层播放，它播放时调用了系统的播放器，而且我想隐藏播放控制按钮后，那个视频都不显示了。下面是创建视频的主要代码private function initVideo():void{// TODO Auto Generated...
html5视频控制按钮样式,这个样式导致HTML5的视频中的按钮变成一个方框。求解决…...
weixin_42648844的博客
06-20 184
该楼层疑似违规已被系统折叠隐藏此楼查看此楼/*Metro风格按钮*//*Button*/*:not(notification) > button:not([type="menu"]):not([anonid="increaseButton"]):not([anonid="decreaseButton"]):not([anonid="twisty"]):not(.expander-up):n...
H5系列之video自己编写控制栏
weixin_30519071的博客
09-09 567
首先来了解一下 video， video呢，是H5 的标签，别人说的 H5播放器，没错 就是他了，利用video标签，可以实现视频播放。 但是啊，你会发现，在不同的浏览器上，播放器的 控制栏，都是不一样的。例如： 在不同的浏览器上， 显示不同的控制栏，这在公司开发，是绝对不允许出现的效果的。 所以，我们可以通过js控制video的方法，来进行自定义控制栏。 播放与暂...
react videojs 自定义控制栏
06-09
要在 React 中使用 Video.js 并添加自定义控制栏，你可以按照以下步骤： 1. 安装 Video.js 和 React Video.js 在你的 React 项目中安装 Video.js 和 React Video.js： ``` npm install --save video.js react-videojs ``` 2. 导入 Video.js 和 React Video.js 在你的组件中导入 Video.js 和 React Video.js： ``` import videojs from 'video.js'; import 'video.js/dist/video-js.css'; import VideoJS from 'react-videojs'; ``` 3. 创建自定义控制栏 在 `componentDidMount` 生命周期中创建自定义控制栏。你可以使用 Video.js API 创建控制栏，例如： ``` componentDidMount() { const videoJsOptions = { controls: false, sources: [{ src: 'https://example.com/path/to/video.mp4', type: 'video/mp4' }] }; this.player = videojs(this.videoNode, videoJsOptions); const ControlBar = videojs.getComponent('ControlBar'); const CustomControlBar = videojs.extend(ControlBar, { constructor: function() { ControlBar.apply(this, arguments); this.addClass('vjs-custom-control-bar'); } }); videojs.registerComponent('CustomControlBar', CustomControlBar); const customControlBar = new CustomControlBar(this.player); this.player.addChild(customControlBar); customControlBar.addChild('playToggle'); customControlBar.addChild('currentTimeDisplay'); customControlBar.addChild('timeDivider'); customControlBar.addChild('durationDisplay'); customControlBar.addChild('progressControl'); customControlBar.addChild('volumePanel'); customControlBar.addChild('fullscreenToggle'); } ``` 在上面的代码中，我们创建了一个自定义控制栏，并将其添加到了 Video.js 播放器中。控制栏包含了常用的控制按钮和进度条。 4. 渲染 Video.js 播放器 在 `render` 方法中，渲染 Video.js 播放器： ``` render() { return ( <div data-vjs-player> <video ref={ node => this.videoNode = node } className="video-js"></video> </div> ) } ``` 这将在 DOM 中创建一个 `<video>` 元素并将其传递给 Video.js。 5. 完整代码示例 下面是一个完整的代码示例，演示如何在 React 中使用 Video.js 并添加自定义控制栏： ``` import React, { Component } from 'react'; import videojs from 'video.js'; import 'video.js/dist/video-js.css'; import VideoJS from 'react-videojs'; export default class VideoPlayer extends Component { componentDidMount() { const videoJsOptions = { controls: false, sources: [{ src: 'https://example.com/path/to/video.mp4', type: 'video/mp4' }] }; this.player = videojs(this.videoNode, videoJsOptions); const ControlBar = videojs.getComponent('ControlBar'); const CustomControlBar = videojs.extend(ControlBar, { constructor: function() { ControlBar.apply(this, arguments); this.addClass('vjs-custom-control-bar'); } }); videojs.registerComponent('CustomControlBar', CustomControlBar); const customControlBar = new CustomControlBar(this.player); this.player.addChild(customControlBar); customControlBar.addChild('playToggle'); customControlBar.addChild('currentTimeDisplay'); customControlBar.addChild('timeDivider'); customControlBar.addChild('durationDisplay'); customControlBar.addChild('progressControl'); customControlBar.addChild('volumePanel'); customControlBar.addChild('fullscreenToggle'); } componentWillUnmount() { if (this.player) { this.player.dispose(); } } render() { return ( <div data-vjs-player> <video ref={ node => this.videoNode = node } className="video-js"></video> </div> ) } } ``` 注意，如果你需要在组件卸载时销毁 Video.js 播放器，请确保在 `componentWillUnmount` 生命周期中调用 `this.player.dispose()`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值