audio标签使用

当 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);

“当前音量”:video.volume
.
.
.
.
.
.
.

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

obj.clientHeight //元素的高度
.

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

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

如果有 position: relative 那么父元素指向的当前
.
.

obj.offsetWidth //元素的宽度

obj.offsetHeight //元素的高度

.
.
.
更多详细的api可看链接 ： https://www.cnblogs.com/congxueda/p/13451479.html

.
.
.
.
对于媒体的加载可以js触发监控的事件有：

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/qq_21108311/article/details/102561832