多媒体API
私人博客
许小墨のBlog —— 菜鸡博客直通车
系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图!
系列文章目录
前端系列文章——传送门
后端系列文章——传送门
文章目录
- 私人博客
- 系列文章目录
- 多媒体标签
- video
- audio
- 多媒体标签的API
- 自定义多媒体控件
- 注
多媒体标签
video
只接受几种视屏格式:ogg、mp4、avi
基本使用:
<video src="视屏文件路径"></video>
<!-- 兼容写法 -->
<video><source src="路径1" type="video/mp4"></source><source src="路径2" type="video/ogg"></source><source src="路径3" type="video/avi"></source>
</video>
controls属性,出现默认的控制面板
autoplay属性,自动播放
loop属性,循环播放
width和height属性,用来设置视屏可视区域的尺寸,但是宽和高一直会保持等比,所以设置一个就行了,如果都设置了,会出现黑边,但可视区域是等比的
audio
只接受ogg和mp3格式,使用方式和video是一样的
<audio src="视屏文件路径"></audio>
<!-- 兼容写法 -->
<audio><source src="路径1" type="audio/mp3"></source><source src="路径2" type="audio/ogg"></source>
</audio>
controls属性,出现默认的控制面板
autoplay属性,自动播放
loop属性,循环播放
多媒体标签的API
在谷歌浏览器中,默认不能自动播放,默认直接调用play方法播放,需要一个自定义按钮来解决或设置video静音
/* 方法 */
video/audio.play() // 播放
video/audio.pause() // 暂停
/* 属性 */
video.duration // 视屏总时长
video.muted // 设置媒体静音,值为true或false,获取媒体是否静音
video.volume // 获取媒体当前声音(0~1),设置声音(0~1)
video.currentTime // 获取媒体当前时间,设置当前时间,单位秒
video/audio.paused // 查看媒体是否暂停
video/audio.playbackRate // 获取/设置播放倍速
/* 事件 */
loadstart:视屏开始加载时触发
progress:浏览器正在下载视屏时触发 - 相当于在加载
canplay:媒体加载完毕,可以播放的时候触发
play:视屏正在播放的时候触发
pause:视屏暂停的时候触发
seeking:视屏开始要跳到新位置的时候触发
seeked:视屏已经跳到新位置的时候触发
waiting:视屏加载等待时触发
timeupdate:只要播放时间更改就会触发
ended:媒体播放结束时触发
error:视屏播放错误时触发
volumechange:视屏音量改变时触发
ratechange:视屏播放速度更改时触发
自定义多媒体控件
布局
<div class="media"><div class="playOrPause"><i class="iconfont icon-zanting"></i></div><div class="time"><span class="currentMinute">00</span>:<span class="currentSecond">00</span>/<span class="durationMinute">00</span>:<span class="durationSecond">00</span></div><div class="playRange"><div class="currentRange"></div><div class="playBtn"></div></div><div class="volume"><div class="volumeRange"><div class="currentVolume"></div><div class="volumeBtn"></div></div><i class="iconfont icon-volume"></i></div>
</div>
样式
.media{width: 800px;height: 50px;border:3px solid #bbb;margin:300px auto;
}
.media>div{float:left;line-height: 50px;margin:0 10px;
}
.media>div.playRange{width: 200px;height: 6px;background-color: #333;margin:22px 10px;border-radius:3px;position: relative;
}
.media>div.playRange .currentRange{width: 100px;height: 6px;background-color: rgb(9, 143, 153);position:absolute;left: 0;top: 0;
}
.media>div.playRange .playBtn{width: 20px;height: 20px;background-color:rgb(9, 143, 153);border-radius:50%;position: absolute;left: 90px;top: -7px;
}
.media .volume{position:relative;
}
.media .volumeRange{width: 4px;height: 100px;background-color: #333;border-radius:2px;position:absolute;top:-100px;left: 10px;display:none;
}
.media .volumeRange .currentVolume{width: 4px;height: 50px;background-color: blue;border-radius:2px;position:absolute;left: 0;bottom:0;
}
.media .volumeRange .volumeBtn{width: 15px;height: 15px;border-radius:50%;background-color: blue;position:absolute;left: -5px;bottom:40px;
}
.media i{font-size: 24px;
}
js效果:
// 控制音量的面板显示隐藏
$('.media .volume').hover(function(){$(this).find('.volumeRange').show()
},function(){$(this).find('.volumeRange').hide()
})// 点击切换小图标
$('.media .playOrPause i').click(function(){if($(this).hasClass('icon-bofang')){$(this).removeClass('icon-bofang').addClass('icon-zanting')// 多媒体播放$('audio')[0].play()}else{$(this).removeClass('icon-zanting').addClass('icon-bofang')// 多媒体暂停$('audio')[0].pause()}
})
$('.media .volume i').click(function(){if($(this).hasClass('icon-volume')){$(this).removeClass('icon-volume').addClass('icon-jingyin')// 让多媒体静音$('audio')[0].muted = true// 让音量小球下来$('.currentVolume').height(0)console.log(-$('.volumeBtn').height()/2)$('.volumeBtn').css('top',$('.volumeRange').height()-$('.volumeBtn').height()/2 + "px")}else{$(this).removeClass('icon-jingyin').addClass('icon-volume')// 取消静音$('audio')[0].muted = false}
})
// 拖拽播放进度
$('.playRange').mousedown(function(e){// 让小球过来 - 获取光标按下的位置,计算小球的leftvar x = e.pageX;var left = x - $('.playBtn').width()/2;$('.playBtn').offset({left})var width = $('.playBtn').position().left + $('.playBtn').width()/2$('.currentRange').width( width )// // 根据当前拖拽好的位置设置多媒体// // 比例 = 当前播放过的进度条长度 / 进度条总长度var percent = width / $('.playRange').width()// 当前播放时长 = 总时长*比例var duration = $('audio')[0].duration;var currentTime = percent * duration;$('audio')[0].currentTime = currentTime;// $('audio')[0].pause()// 移动$(this).mousemove(function(e){// 让小球过来 - 获取光标按下的位置,计算小球的leftvar x = e.pageX;var left = x - $('.playBtn').width()/2;$('.playBtn').offset({left})var width = $('.playBtn').position().left + $('.playBtn').width()/2$('.currentRange').width( width )$('audio')[0].pause()$('.media .playOrPause i').removeClass('icon-zanting').addClass('icon-bofang')})
})
$('.playRange').mouseup(function(e){$('.playRange').off('mousemove')var width = $('.currentRange').width()// 根据当前拖拽好的位置设置多媒体// 比例 = 当前播放过的进度条长度 / 进度条总长度var percent = width / $('.playRange').width()// 当前播放时长 = 总时长*比例var duration = $('audio')[0].duration;var currentTime = percent * duration;$('audio')[0].currentTime = currentTime;$('audio')[0].play()$('.media .playOrPause i').removeClass('icon-bofang').addClass('icon-zanting')
})// 拖拽音量
$('.volumeRange').mousedown(function(e){// 让小球过来 - 获取光标按下的位置,计算小球的leftvar y = e.pageY;var top = y - $('.volumeBtn').width()/2$('.volumeBtn').offset({top})$('.currentVolume').height( $('.volumeRange').height() - $('.volumeBtn').position().top - $('.volumeBtn').height()/2 )// 计算音量的比例var volume = ($('.currentVolume').height() / $('.volumeRange').height()).toFixed(1)-0$('audio')[0].volume = volume$(this).mousemove(function(e){var y = e.pageY;var top = y - $('.volumeBtn').width()/2$('.volumeBtn').offset({top})$('.currentVolume').height( $('.volumeRange').height() - $('.volumeBtn').position().top - $('.volumeBtn').height()/2 )// 计算音量的比例var volume = ($('.currentVolume').height() / $('.volumeRange').height()).toFixed(1)-0$('audio')[0].volume = volume})
})
$(document).mouseup(function(e){$('.volumeRange').off('mousemove')
})// 当多媒体加载完成的时候获取多媒体的播放时长
$('audio')[0].addEventListener('canplay',canplay)
function canplay(){var duration = this.duration; // 秒// 换算成分钟和秒var minute = parseInt(duration/60)var second = parseInt(duration%60);minute = minute<10?'0'+minute:minute;second = second<10?'0'+second:second;$('.durationMinute').text(minute)$('.durationSecond').text(second)// 将播放进度小球放到0的位置$('.playBtn').css('left',-$('.playBtn').width()/2 + "px")$('.currentRange').width(0)// 将音量设置在最顶端$('.volumeBtn').css('top',-$('.volumeBtn').height()/2 + "px")$('.currentVolume').height($('.volumeRange').height())
}// 正在播放过程中获取当前播放的时长
$('audio')[0].addEventListener('timeupdate',timeupdate)
function timeupdate(){// 获取 当前时长var currentTime = this.currentTime;var minute = parseInt(currentTime/60)var second = parseInt(currentTime%60);minute = minute<10?'0'+minute:minute;second = second<10?'0'+second:second;$('.currentMinute').text(minute)$('.currentSecond').text(second)// 计算当前播放过多少的比例var duration = this.duration; var percent = currentTime / duration;// 计算播放过的进度条的长度var width = $('.playRange').width() * percent;$('.currentRange').width(width)$('.playBtn').css('left',width-$('.playBtn').width()/2 + "px")
}// 多媒体播放结束
$('audio')[0].addEventListener('ended',ended)
function ended(){$('.media .playOrPause i').removeClass('icon-zanting').addClass('icon-bofang')
}
注
本博文缺失大量图片,严重影响内容完整性以及阅读体验,完整内容请前往本人菜鸡博客——许小墨のBlog
相关文章:
多媒体API
私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图! 系列文章目录 前端系列文章——传送门 后端系列文章——传送…...

免费矢量图标网站有哪些?
图标作为UI设计的必要元素,矢量图标是质量的保证。据说完美的用户体验应该从灵活性开始 。在响应设计盛行的当下,灵活矢量图标的重要性不言而喻。在这种情况下,风格齐全、质量上乘的矢量图标网站堪称设计宝藏。在这篇文章中,我们…...

基于Redis的分布式限流详解
前言 Redis除了能用作缓存外,还有很多其他用途,比如分布式锁,分布式限流,分布式唯一主键等,本文将和大家分享下基于Redis分布式限流的各种实现方案。 一、为什么需要限流 用最简单的话来说:外部请求是不可…...

权限提升:漏洞探针.(Linux系统)
权限提升:漏洞探针. 权限提升简称提权,由于操作系统都是多用户操作系统,用户之间都有权限控制,比如通过 Web 漏洞拿到的是 Web 进程的权限,往往 Web 服务都是以一个权限很低的账号启动的,因此通过 Webshel…...

python-11-多线程模块threading
python使用多线程实例讲解 1 进程和线程 1.1 进程和线程的概念 进程(process)和线程(thread)是操作系统的基本概念。 进程是资源分配的最小单位,线程是CPU调度的最小单位。 线程是程序中一个单一的顺序控制流程,进程内一个相对独立的、可调度的执行单…...

动态gif图片如何在线做?轻松实现图片在线生成gif
常见的jpg、png格式的静态图片想要变成gif格式的动态图片时,要怎么办呢?有没有什么简单实用的gif制作工具呢? 一、什么工具能够在线制作gif? GIF中文网作为一款专业的gif制作(https://www.gif.cn/)工具&a…...

浅谈联网汽车安全漏洞
“智能网联汽车存在内生共性问题,即软硬件的漏洞后门,基于此进行的网络攻击可以直接带来勒索、盗窃、大规模车辆恶意操控风险,还有数据泄露等网络安全事件。如果内生的漏洞后门问题不解决,系统自身难保,很难谈系统安…...

深入理解SeaTunnel:易用、高性能、支持实时流式和离线批处理的海量数据集成平台
深入理解SeaTunnel:易用、高性能、支持实时流式和离线批处理的海量数据集成平台 一、认识SeaTunnel二、SeaTunnel 系统架构、工作流程与特性三、SeaTunnel工作架构四、部署SeaTunnel1.安装Java2.下载SeaTunnel3.安装连接器 五、快速启动作业1.添加作业配置文件以定义…...

项目上线 | 兰精携手盖雅工场,数智驱动绿色转型
近年来,纺织纤维行业零碳行动如火如荼。作为低碳环保消费新时尚引领者,同时也是纤维领域隐形冠军,兰精在推进绿色发展的同时,也在不断向内探索企业数字化转型之道,以此反哺业务快速扩张。 数智转型,管理先…...

102-Linux_I/O复用方法之poll
文章目录 1.poll系统调用的作用2.poll的原型3.poll支持的事件类型4.poll实现TCP服务器(1)服务器端代码:(2)客户端代码:(3)运行结果截图: 1.poll系统调用的作用 poll 系统调用和 select 类似,也是在指定时间内轮询一定数量的文件描述符,以测试其中是否有…...

【VAR模型 | 时间序列】帮助文档:VAR模型的引入和Python实践(含源代码)
向量自回归 (VAR) 是一种随机过程模型,用于捕获多个时间序列之间的线性相互依赖性。 VAR 模型通过允许多个进化变量来概括单变量自回归模型(AR 模型)。 VAR 中的所有变量都以相同的方式进入模型:每个变量都有一个方程式ÿ…...

Spark任务提交流程
1. yarn-client Driver在任务提交的本地机器上运行,Driver启动后会和ResourceManager通讯,申请启动ApplicationMaster; 随后ResourceManager分配Container,在合适的NodeManager上启动ApplicationMaster,此时的ApplicationMaster的…...

python相对路径与绝对路径
9.1 Python 绝对路径与相对路径 - 知乎 (zhihu.com) 目录 1. 绝对路径 1.1 概念 1.2 用绝对路径打开文件 1.2 相对路径 1.3 python路径表示的斜杠问题 1. 绝对路径 1.1 概念 绝对路径 指完整的描述文件位置的路径。绝对路径就是文件或文件夹在硬盘上的完整路径。 在 Win…...

SPSS如何进行基本统计分析之案例实训?
文章目录 0.引言1.描述性分析2.频数分析3.探索分析4.列联表分析5.比率分析 0.引言 因科研等多场景需要进行数据统计分析,笔者对SPSS进行了学习,本文通过《SPSS统计分析从入门到精通》及其配套素材结合网上相关资料进行学习笔记总结,本文对基本…...
Python项目实战篇——常用验证码标注和识别(需求分析和实现思路)
前言:验证码识别和标注是现在网络安全中的一个重要任务,尤其是在一些电商平台和在线支付等场景中,验证码的安全性至关重要。本文将介绍如何使用Python实现常用的验证码标注和识别,以便为自己的项目提供参考。 一、需求分析 1、验证…...

MySQL基础(六)多表查询
多表查询,也称为关联查询,指两个或更多个表一起完成查询操作。 前提条件:这些一起查询的表之间是有关系的(一对一、一对多),它们之间一定是有关联字段,这个关联字段可能建立了外键,…...

零死角玩转stm32中级篇3-SPI总线
本篇博文目录: 一.基础知识1.什么是SPI2.SPI和IIC有什么不同3.SPI的优缺点4.SPI是怎么实现通信的5.SPI 数据传输的步骤6.SPI菊花链7.通过SPI实现数据的读和写 二.STM32F103C8T6芯片SPI协议案例代码 一.基础知识 1.什么是SPI SPI(Serial Peripheral Interface&#…...

顺序表功能实现(入手版详解)
🍉博客主页:阿博历练记 📖文章专栏:数据结构与算法 🚚代码仓库:阿博编程日记 🌹欢迎关注:欢迎友友们点赞收藏关注哦 文章目录 🍓前言✨顺序表🔍1.顺序表的整体…...
Java 中的线程是什么,如何创建和管理线程-下(十三)
书接上文 CompletableFuture CompletableFuture 是 Java 8 中新增的类,提供了更为强大的异步编程支持。它可以将多个异步任务组合成一个整体,并且可以处理异常情况。 例如,可以使用 CompletableFuture 来实现异步任务的串行执行࿱…...
为什么我的Windows 10 便签不支持更改字体?
Windows便签是一款常用的记录工具,可以帮助我们快速记录一些重要的信息。在使用Windows便签时,如果你想要更好地呈现你的信息,可以通过设置字体来达到这个效果。本文将介绍Windows便签字体设置的相关知识,希望对你有所帮助。 1、打…...

利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...

dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求,本次涉及的主要是收费汇聚交换机的配置,浪潮网络设备在高速项目很少,通…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机,因为在使用过程中发现 Airsim 对外部监控相机的描述模糊,而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置,最后在源码示例中找到了,所以感…...

Qemu arm操作系统开发环境
使用qemu虚拟arm硬件比较合适。 步骤如下: 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载,下载地址:https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...
【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error
在前端开发中,JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作(如 Promise、async/await 等),开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝(r…...
es6+和css3新增的特性有哪些
一:ECMAScript 新特性(ES6) ES6 (2015) - 革命性更新 1,记住的方法,从一个方法里面用到了哪些技术 1,let /const块级作用域声明2,**默认参数**:函数参数可以设置默认值。3&#x…...
【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅!
【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅! 🌱 前言:一棵树的浪漫,从数组开始说起 程序员的世界里,数组是最常见的基本结构之一,几乎每种语言、每种算法都少不了它。可你有没有想过,一组看似“线性排列”的有序数组,竟然可以**“长”成一棵平衡的二…...

【51单片机】4. 模块化编程与LCD1602Debug
1. 什么是模块化编程 传统编程会将所有函数放在main.c中,如果使用的模块多,一个文件内会有很多代码,不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里,在.h文件里提供外部可调用函数声明,其他.c文…...