audio标签与video标签的常用属性及方法

一、常用的css属性

        1.src:用于指明video标签需要播放的音频的地址

                ——<audio sec = "音频地址"> </audio>

        2.autoplay:用于指明video标签是否需要自动播放音频

                ——<audio aotuplay = "aotuplay"> </audio>

        3.controls:用于指明video标签是否显示控制台

                ——<audio controls = "controls"> </audio>

        4.loop:用于设置video标签音频播放完毕之后是否循环播放

                ——<audio loop = "loop"></audio>

        5.preload:预加载音频(注意:preload和autoplay相冲,如果设置了autoplay属性,那么        preload属性就会失效)

                ——<audio preload = "preload"></audio>

        6.muted:让音频静音

                ——<audio muted = "muted"></audio>

二、js中常用的属性设置及方法(dom指代获取的标签对象)

1.dom.play(); //播放

2.dom.pause(); //暂停

3.dom.load(); //重新加载src指定的资源

4.dom.currentTime = value; //当前播放的位置,赋值可改变位置

5.dom.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0

6.dom.paused; //是否暂停

7.dom.playbackRate = value;//当前播放速度,设置后马上改变

8.dom.ended; //是否结束

9.dom.autoPlay; //是否自动播放

10.dom.loop; //是否循环播放

11.dom.currentSrc; //返回当前资源的URL

12.dom.src = value; //返回或设置当前资源的URL

13.dom.controls;//是否有默认控制条

14.dom.volume = value; //音量

15.dom.muted = value; //静音

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
video标签中,可以添加自定义属性使用HTML的data-*属性。例如,可以使用属性"data-myattribute"来添加一个自定义属性,并设置它的值为"myvalue"。这样我们就可以通过JavaScript或CSS选择器来访问和操作这个自定义属性。例如,可以使用document.querySelector('video')来获取video标签对象,然后使用video.dataset.myattribute来获取这个自定义属性的值,如下所示: var video = document.querySelector('video'); var myattribute = video.dataset.myattribute; console.log(myattribute); // 输出 "myvalue" 在CSS中,可以使用属性选择器来选择具有特定自定义属性值的video标签,例如video[data-myattribute="myvalue"]。 此外,对于video标签,还有一些常用属性方法可以用来设置和操作: 1. muted:设置视频是否静音,可以通过在video标签中设置muted属性来实现静音,例如<video muted="muted"></video>。 2. autoplay:设置视频是否自动播放,可以通过在video标签中设置autoplay属性来实现自动播放。 3. preload:设置视频是否预加载,可以通过在video标签中设置preload属性来实现预加载。注意,如果同时设置了autoplay属性,那么preload属性会失效。 以上是video标签中一些常见的属性说明。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [html中,怎么给video标签添加一些自定义的属性](https://blog.csdn.net/m0_68094390/article/details/130798624)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [audio标签video标签常用属性方法](https://blog.csdn.net/weixin_52957570/article/details/126922787)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小菜凯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值