0

0

Javascript如何操作视频和音频_如何控制媒体播放?

紅蓮之龍

紅蓮之龍

发布时间:2025-12-19 22:52:02

|

442人浏览过

|

来源于php中文网

原创

javascript通过元素dom接口控制媒体,需先获取元素并监听loadedmetadata事件确保readystate≥2再操作;常用方法包括play()、pause()、load(),属性含currenttime、volume、paused等;须遵守自动播放策略,静音视频可自动播放,有声媒体需用户交互后调用play()。

javascript如何操作视频和音频_如何控制媒体播放?

JavaScript 通过 <video></video><audio></audio> 元素的 DOM 接口控制媒体播放,核心是获取元素引用后调用其方法、监听事件、读写属性。

获取媒体元素并检查就绪状态

先用 document.querySelectorgetElementById 获取元素,再确认是否已加载元数据(如时长、尺寸),避免调用方法时报错:

  • video.readyStateHTMLMediaElement.HAVE_METADATA(2)或更高值时,才能安全调用 play()、读取 duration
  • 推荐监听 loadedmetadata 事件,而非轮询 readyState
  • 示例:const video = document.getElementById('myVideo');
    video.addEventListener('loadedmetadata', () => { console.log('时长:', video.duration); });

常用播放控制方法与属性

直接操作播放行为和状态:

android rtsp流媒体播放介绍 中文WORD版
android rtsp流媒体播放介绍 中文WORD版

本文档主要讲述的是android rtsp流媒体播放介绍;实时流协议(RTSP)是应用级协议,控制实时数据的发送。RTSP提供了一个可扩展框架,使实时数据,如音频与视频,的受控、点播成为可能。数据源包括现场数据与存储在剪辑中数据。该协议目的在于控制多个数据发送连接,为选择发送通道,如UDP、组播UDP与TCP,提供途径,并为选择基于RTP上发送机制提供方法。希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看

下载
  • play() 启动播放(可能返回 Promise,需处理拒绝,例如用户未交互导致被浏览器阻止)
  • pause() 暂停播放
  • load() 重载资源(清空缓冲、重置状态)
  • currentTime 读写当前播放位置(秒,可设为小数)
  • volume 音量(0.0–1.0),muted 控制静音
  • paused(布尔值)、endedseeking 等只读属性用于判断状态

关键事件监听实现精准响应

媒体生命周期中多个事件可用于反馈与干预:

立即学习Java免费学习笔记(深入)”;

  • play / pause:用户主动操作后触发
  • timeupdate:播放过程中高频触发(通常每 250ms 左右),适合更新进度条
  • seeked:拖动完成且定位成功后触发(区别于 seeking,后者表示正在跳转)
  • ended:自然播放完毕时触发
  • error:加载失败或解码出错时触发,可通过 video.error.code 判断错误类型

注意自动播放策略与用户交互要求

现代浏览器普遍限制无用户手势(如 click、touchstart)触发的音频/视频自动播放:

  • 含声音的 videoaudio 必须在用户交互后首次调用 play()
  • 静音视频(muted=true)通常允许自动播放
  • 建议在按钮点击中调用 play(),并用 .catch(e => console.warn('播放被阻止:', e)) 处理拒绝
  • 移动端尤其严格,部分 iOS Safari 要求 playsinline 属性才能内联播放

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

411

2023.10.18

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

357

2023.10.25

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

557

2023.09.20

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

1736

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

569

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2338

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

43

2026.01.19

console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

419

2023.08.08

Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

48

2026.02.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.7万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.2万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号