当前位置: 首页 > news >正文

多媒体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 —— 菜鸡博客直通车 系列文章完整版&#xff0c;配图更多&#xff0c;CSDN博文图片需要手动上传&#xff0c;因此文章配图较少&#xff0c;看不懂的可以去菜鸡博客参考一下配图&#xff01; 系列文章目录 前端系列文章——传送门 后端系列文章——传送…...

免费矢量图标网站有哪些?

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

基于Redis的分布式限流详解

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

权限提升:漏洞探针.(Linux系统)

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

python-11-多线程模块threading

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

动态gif图片如何在线做?轻松实现图片在线生成gif

常见的jpg、png格式的静态图片想要变成gif格式的动态图片时&#xff0c;要怎么办呢&#xff1f;有没有什么简单实用的gif制作工具呢&#xff1f; 一、什么工具能够在线制作gif&#xff1f; GIF中文网作为一款专业的gif制作&#xff08;https://www.gif.cn/&#xff09;工具&a…...

浅谈联网汽车安全漏洞

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

深入理解SeaTunnel:易用、高性能、支持实时流式和离线批处理的海量数据集成平台

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

项目上线 | 兰精携手盖雅工场,数智驱动绿色转型

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

102-Linux_I/O复用方法之poll

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

【VAR模型 | 时间序列】帮助文档:VAR模型的引入和Python实践(含源代码)

向量自回归 (VAR) 是一种随机过程模型&#xff0c;用于捕获多个时间序列之间的线性相互依赖性。 VAR 模型通过允许多个进化变量来概括单变量自回归模型&#xff08;AR 模型&#xff09;。 VAR 中的所有变量都以相同的方式进入模型&#xff1a;每个变量都有一个方程式&#xff…...

Spark任务提交流程

1. yarn-client Driver在任务提交的本地机器上运行&#xff0c;Driver启动后会和ResourceManager通讯&#xff0c;申请启动ApplicationMaster; 随后ResourceManager分配Container&#xff0c;在合适的NodeManager上启动ApplicationMaster&#xff0c;此时的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.引言 因科研等多场景需要进行数据统计分析&#xff0c;笔者对SPSS进行了学习&#xff0c;本文通过《SPSS统计分析从入门到精通》及其配套素材结合网上相关资料进行学习笔记总结&#xff0c;本文对基本…...

Python项目实战篇——常用验证码标注和识别(需求分析和实现思路)

前言&#xff1a;验证码识别和标注是现在网络安全中的一个重要任务&#xff0c;尤其是在一些电商平台和在线支付等场景中&#xff0c;验证码的安全性至关重要。本文将介绍如何使用Python实现常用的验证码标注和识别&#xff0c;以便为自己的项目提供参考。 一、需求分析 1、验证…...

MySQL基础(六)多表查询

多表查询&#xff0c;也称为关联查询&#xff0c;指两个或更多个表一起完成查询操作。 前提条件&#xff1a;这些一起查询的表之间是有关系的&#xff08;一对一、一对多&#xff09;&#xff0c;它们之间一定是有关联字段&#xff0c;这个关联字段可能建立了外键&#xff0c;…...

零死角玩转stm32中级篇3-SPI总线

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

顺序表功能实现(入手版详解)

&#x1f349;博客主页&#xff1a;阿博历练记 &#x1f4d6;文章专栏&#xff1a;数据结构与算法 &#x1f69a;代码仓库&#xff1a;阿博编程日记 &#x1f339;欢迎关注&#xff1a;欢迎友友们点赞收藏关注哦 文章目录 &#x1f353;前言✨顺序表&#x1f50d;1.顺序表的整体…...

Java 中的线程是什么,如何创建和管理线程-下(十三)

书接上文 CompletableFuture CompletableFuture 是 Java 8 中新增的类&#xff0c;提供了更为强大的异步编程支持。它可以将多个异步任务组合成一个整体&#xff0c;并且可以处理异常情况。 例如&#xff0c;可以使用 CompletableFuture 来实现异步任务的串行执行&#xff1…...

为什么我的Windows 10 便签不支持更改字体?

Windows便签是一款常用的记录工具&#xff0c;可以帮助我们快速记录一些重要的信息。在使用Windows便签时&#xff0c;如果你想要更好地呈现你的信息&#xff0c;可以通过设置字体来达到这个效果。本文将介绍Windows便签字体设置的相关知识&#xff0c;希望对你有所帮助。 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 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

dify打造数据可视化图表

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

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

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

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

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

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅!

【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅! 🌱 前言:一棵树的浪漫,从数组开始说起 程序员的世界里,数组是最常见的基本结构之一,几乎每种语言、每种算法都少不了它。可你有没有想过,一组看似“线性排列”的有序数组,竟然可以**“长”成一棵平衡的二…...

【51单片机】4. 模块化编程与LCD1602Debug

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