JS基础-21-audio、video的一些属性和方法

最新推荐文章于 2024-09-07 15:09:53 发布
原创 最新推荐文章于 2024-09-07 15:09:53 发布 · 542 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文详细介绍了HTML中音频元素的各种属性，如src、controls、autoplay等，以及方法如play和pause，还有关键事件如onpause、onplay和onended。通过这些内容，读者可以全面了解如何在网页中使用音频。

属性

src:音频资源地址
controls：是否显示控制器
autoplay：自动播放（浏览器禁用了）
muted：静音
volume：音量
currentTime：可以设置和获取当前播放到的时间点

方法

play ：播放
pause：暂停

事件

onpause：暂停事件
onplay：播放事件
onplaying：正在播放事件
onvolumchange：音量改变
onended：当内容播放完会触发此事件

HZ~
关注
专栏目录
使用JavaScript控制＜video＞视频播放
pleaseprintf的博客
03-24 3982
前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。HTML 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 标签用于音频内容，但是 元素可能在用户体验上更合适。在不支持 video 元素的浏览器中， 标签中间的内容会显示，作为降级处理。controls属性。
JavaScript个人总结-网页元素接口-＜video＞和＜audio＞元素
最新发布
qq_31435455的博客
03-06 962
video>元素用来加载视频，是对象的实例。<audio>元素用来加载音频，是对象的实例。而和都继承了，所以这两个 HTML 元素有许多共同的属性和方法，可以放在一起介绍。理论上，这两个 HTML 元素直接用src属性指定媒体文件，就可以使用了。注意，<video>元素有width属性和height属性，可以指定宽和高。<audio>元素没有这两个属性，因为它的播放器外形是浏览器给定的，不能指定。实际上，不同的浏览器支持不同的媒体格式，我们不得不用<source>元素指定同一个媒体文件的不同格式。
js操作audio和video
a_passing_traveller的博客
04-06 453
自定义样式 audio和vedio是默认看不见元素的，可以使用设置controls样式使其可见(该样式由浏览器自己提供)，在network中看到media看到相关的信息。这里我们取消controls自定义它的样式。 <div class="box"> <video id="myVideo"> <source src="http://www....
video 属性和事件用法大全
CherishL_的专栏
09-26 1138
video 属性 <!-- video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP4，WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> <video src="test.mp4" c...
JavaScript video标签使用
qq_44783086的博客
03-08 1906
/设置视频倍速关闭、下载关闭。video设置属性参数。
javascript学习之＜video＞，＜audio＞属性和方法
白话机器学习
08-04 724
video>元素用来加载视频，是对象的实例。元素用来加载音频，是对象的实例。而和都继承了，所以这两个 HTML 元素有许多共同的属性和方法，可以放在一起介绍。理论上，这两个 HTML 元素直接用src属性指定媒体文件，就可以使用了。注意，元素有width属性和height属性，可以指定宽和高。元素没有这两个属性，因为它的播放器外形是浏览器给定的，不能指定。实际上，不同的浏览器支持不同的媒体格式，我们不得不用元素指定同一个媒体文件的不同格式。
H5新属性audio音频和video视频的控制详解（推荐）
09-27
本文详细介绍了如何利用H5中的audio和video标签实现对音视频文件的控制，并提供了一些与之相关的JavaScript代码以实现更复杂的控制逻辑。 首先，音频和视频文件可以通过<video>和<audio>标签直接嵌入到网页中。这两...
vue-audio-音频标签包装器； Vue 2.x的声音播放器组件-Vue.js开发
05-27
Vue.js声音播放器Vue.js声音播放器UI。 涵盖了音频标签API并添加了更多内容。 演示在此处查看DEMO安装使用npm：npm install vue-audio-Vue.js声音播放器Vue.js声音音频播放器UI。 涵盖了音频标签API并添加了更多内容...
Web-前端html+css从入门到精通 119. video标签与audio标签.zip
05-23
`<video>`和`<audio>`标签都有一些共同的属性和方法，如： - `src`：设置或返回媒体文件的URL。 - `autoplay`：视频或音频自动开始播放。 - `loop`：视频或音频循环播放。 - `muted`：默认静音。 - `currentTime`：...
图文详解 video和audio元素的属性、事件及使用
alalasheep的博客
04-04 4602
集合类型定义 集合操作符 集合处理方法 集合类型应用场景
videojs和Video的属性事件
livein80的博客
01-28 7144
1.引入video.js和video-js.css <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script> 1.2 使用video标签添加样式‘
audio标签详解（属性+js操作+生命周期+播放事件）
qq_54896194的博客
07-25 9695
用来展示音频文件。目前支持的三种音频格式文件：mp3,wav和ogg;
音视频标签的api
weixin_68658847的博客
02-03 566
音视频标签的api
JavaScript原生video配置说明
weixin_45034786的博客
09-07 1603
*
HTML5新增video标签及对应属性、API详解
weixin_30508309的博客
07-09 997
知识说明： 比不上很牛的前端开发人员，但自始至终明白“万丈高楼平地起”，基础最重要，初学HTML5，稳固基础第一步，把最基本的整理下来，留下自己学习的痕迹。HTML5新增的video标签，将其属性以及API使用整理下来，无论以后用不用得到，都是自己的一笔宝贵的财富。 Video标签： 一、video支持视频格式： 以下是三种最常用的格式 1、 ogg格式：带有T...
vue中关于audio的onended事件实现
YanHSama的博客
08-10 6371
在vue中使用 audio有一个属性ended，用来判断音频是否已播放结束 <audio :src="musicUrl" controls autoplay @ended="handleNext();handleLyric()"></audio> 当音频结束时，要进行某些操作。便使用onended事件 // 自动播放下一首 handleNext () { let songmids = this.$store.state.songmids let
video标签的使用以及通过js控制视频开始与暂停
热门推荐
weixin_45050636的博客
05-14 1万+
video参数 <!-- autoplay:自动播放 --> <!-- poster：占位图片，默认视频第一帧图像 --> <!-- controls：控制条 --> <!-- loop：循环播放 preload：预加载,和autoplay相冲。二选一 meted：静音 height|width：高宽设置（只...
Video标签属性、对象属性、对象方法、以及对象事件有哪些
Bunny的博客
12-20 2675
元素还有一些可以通过 JavaScript 进行访问和控制的对象属性，比如： 元素也有一些可以通过 JavaScript 调用的方法，比如： 元素支持一些事件，可以在 JavaScript 中对其进行监听，比如：
HTML5 VIDEO标签播放事件流水
weixin_33755554的博客
02-05 494
HTML5 的 &lt;video&gt;标签有许多默认的事件，如果我们通过这个播放器加载一段视频文件，从开始加载到播放结束，都经历了哪些事件呢？这些事件的触发顺序如何？ [1]HTML5:onplay[2]HTML5:onwaiting[3]HTML5:ondurationchange[4]HTML5:onloadedmetadata[5]HTML5:onloadeddata[6]HTML5:...
HTML5 Video标签属性、方法与事件的全面解析
与`<img>`标签类似，`<video>`标签支持一系列的属性、方法和事件，以控制视频的播放和展示。视频内容的引入，使得网页能够提供更加丰富和动态的用户体验。 #### HTMLMediaElement `HTMLMediaElement`是所有媒体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值