当 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
