audio标签使用

audio标签使用当 audio 标签添加上 controls 属性时 页面上会显示出所有的控制组件 若有些组件不需要只需要在 css 中设置相关属性把它隐藏掉即可 全屏按钮 video webkit media controls fullscreen button display none 播放按钮 video webkit media controls play button display none

当 audio 标签添加上 controls 属性时,页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。

//全屏按钮 video::-webkit-media-controls-fullscreen-button { display: none; } //播放按钮 video::-webkit-media-controls-play-button { display: none; } //进度条 video::-webkit-media-controls-timeline { display: none; } //观看的当前时间 video::-webkit-media-controls-current-time-display{ display: none; } //剩余时间 video::-webkit-media-controls-time-remaining-display { display: none; } //音量按钮 video::-webkit-media-controls-mute-button { display: none; } video::-webkit-media-controls-toggle-closed-captions-button { display: none; } //音量的控制条 video::-webkit-media-controls-volume-slider { display: none; } //所有控件 video::-webkit-media-controls-enclosure{ display: none; } 

常用的一些 video API

“视频播放”:video.play();

“视频暂停播放”:video.pause();

“视频地址”:video.currentSrc;

“视频总时长”:video.duration;

“视频播放速率”:video.playbackRate;

“是否暂停”:video.paused;

“是否结束”:video.ended;

“是否静音”:video.muted;

“当前播放时间”: video.currentTime;

“当前缓冲量”:video.buffered.end(0);

obj.clientWidth //获取元素的宽度

obj.offsetLeft //元素相对于父元素的left

obj.offsetTop //元素相对于父元素的top

obj.offsetWidth //元素的宽度

obj.offsetHeight //元素的高度

audio.addEventListener("loadstart", function() { // 开始加载 }); audio.addEventListener("durationchange", function() { // 已获得播放时长 }); audio.addEventListener("loadeddata", function() { // 已获得播放头文件 }); audio.addEventListener("progress", function() { // 缓冲下载中 }); audio.addEventListener("canplay", function() { // 可以播放 }); audio.addEventListener("timeupdate", function() { // 播放中 }); audio.addEventListener("canplaythrough", function() { // 可以不发生缓冲下载从头播放到结束,一般来说是加载完成过一次的判断 }); //纯自己代码 audio.addEventListener('ended', function () { //表示播放完成 audio.pause() item.flag = 'false' }, false); 

而常用的一般是:

 audio.addEventListener("progress", function() { // 缓冲下载中 }); audio.addEventListener("timeupdate", function() { // 播放中 }); 

更多内容看链接: https://blog.csdn.net/_/article/details/

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/223156.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 下午2:44
下一篇 2026年3月17日 下午2:44


相关推荐

  • 如何在vue项目中使用md5加密

    如何在vue项目中使用md5加密npm安装:npminstall–savejs-md51.在需要使用的项目文件中引入:importmd5from’js-md5′;使用:md5(‘holle’)//bcecb35d0a12baad472fbe0392bcc0432.或者在main.js文件中将md5转换成vue原型:importmd5from’js-md5…

    2022年7月11日
    30
  • doxygen 命令_doxygen使用总结

    doxygen 命令_doxygen使用总结doxygen 功能 为许多种语言编写的程序生成文档的工具 举例 生成一个模板配置文件 模板文件中有详细的注释 doxgen gtest 这样 会生成一个 test 文件 1500 多行 可以把这个文件做为模板编写配置文件 如果之前有 test 那么会将原来的 test 备份为 test bak 模板文件的部分内容如下 前面的内容省略 DOXYFILE ENCODING UTF 8

    2026年3月18日
    2
  • Spring、SpringBoot和SpringCloud的关系

    Spring、SpringBoot和SpringCloud的关系1、SpringBoot是Spring的一套快速配置脚手架,可以基于SpringBoot快速开发单个微服务。2、SpringCloud是一个基于SpringBoot实现的云应用开发工具。3、SpringBoot专注于快速、方便集成的单个个体,SpringCloud是关注全局的服务治理框架。4、SpringBoot使用了默认大于配置的理念,很多集成方案已经帮你选择好了,能不配置就…

    2022年5月29日
    40
  • maven学习系列——(七)Dependency

    Dependency介绍本文转自:Maven简介(六)——Dependency,并加上自己在实际使用中的总结和说明!1、依赖的传递性依赖传递对版本的选择假设A依赖于B和C,然后B依赖于D,D又依赖于E1.0,C直接依赖于E2.0,那么这个时候A依赖的是E1.0还是E2.0,还是这两个都依赖呢?两个都依赖是肯定不行的,因为它们可能会有冲突的地方。这个时候就涉及到Maven中依赖传递对…

    2022年2月27日
    44
  • Java生成随机字符串(三种方式)-XXOO

    Java生成随机字符串(三种方式)-XXOO1 生成的字符串每个位置都有可能是 str 中的一个字母或数字 需要导入的包是 importjava util Random length 用户要求产生字符串的长度 publicstatic intlength Stringstr abcdefghijkl

    2026年3月17日
    1
  • 项目警告:There are multiple modules with names that only differ in casing.This can lead to unexpected be…

    项目警告:There are multiple modules with names that only differ in casing.This can lead to unexpected be…

    2021年6月17日
    115

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号