video、audio的属性和方法（笔记）

2024-07-15 22:10| 来源: 网络整理| 查看: 265

目录内容介绍一、video 视频1、video 属性2、video 事件3、video css控制按钮二、audio 音频1、audio 属性2、audio 事件

内容介绍

H5 引入了audio和video标签在页面中嵌入音频和视频，不用再使用Flash等插件播放媒体文件，下面了解一下audio和video的一些属性和方法。

一、video 视频 1、video 属性属性说明代码禁止下载controlslist=“nodownload”禁止全屏controlslist=“nodownload nofullscreen”（controlslist可多选）自动播放autoplay默认静音muted循环播放loop预加载preload贴图poster=“poster.jpg”音量控制var video = document.getElementById('_volume');video.volume = 0;(取值范围：0 到 1，0 是静音，0.5 是一半的音量，1 是最大音量（默认值）)播放时间控制var vedio = document.getElementById('_time');vedio.currentTime=600视频当前正在播放的时间（单位：s），进度条拖动显示的时间值播放地址切换var vedio = document.getElementById('_src');setTimeout(() => {vedio.src='http://vue.hyfarsight.com/webpack%E4%B8%80.mp4'}, 6000); 2、video 事件事件名说明loadstart视频查找，当浏览器开始加载资源时触发durationonchange时长变化，当指定资源时长发生变化时触发 => NAN变为实际时长；var vedio = document.getElementById('_time');console.log(vedio.duration);vedio.addEventListener('durationchange',function(e){console.log(vedio.duration); })loadedmetadata元数据加载，当指定资源的元数据已加载时触发，元数据包括时长/尺寸/文本轨道等信息值loadeddata视频下载监听，当当前帧的数据已加载，但没有足够的数据来播放指定资源的下一帧时触发progress浏览器下载监听，当浏览器正在下载指定资源时触发canplay浏览器下载监听，当浏览器正在下载指定资源时触发canplaythrough可流畅播放，当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定资源时触发play播放监听pause暂停监听seeking查找开始，当用户开始移动、跳跃到资源中新的位置时触发seeked查找结束，当用户已经移动、跳跃到视频中新的位置时触发waiting视频加载等待，当视频由于需要缓冲下一帧而停止，等待时触发playing当视频在已经因缓冲而暂停或停止后已就绪时触发timeUpdate目前的播放位置已更改时，播放时间更新ended播放结束error播放错误volumechange音量改变时stalled当浏览器尝试获取媒体数据，但数据不可用时ratechange当视频的播放速度已更改时 3、video 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; } 二、audio 音频 1、audio 属性属性说明src播放资源的url地址preload预加载loop循环播放-当前播放结束后重新播放controls是否显示控件autoplay自动播放duration媒体总时长，无法获取时返回NANpaused媒体被暂停，返回true，否则返回falseended媒体文件播放完毕muted用来获取是否为静音状态，值为boolvolume控制音量大小，0–1startTime返回起始的播放时间error返回错误代码currentTime用来获取或者控制当前的播放时间，单位为秒（s）currentSrc以字符串形式返回正在播放或者已经加载的文件 2、audio 事件事件名说明load()加载资源play()播放pause()暂停播放canPlayType()测试是否支持特定类型文件loadstart客户端开始请求数据progress客户端正在请求数据，缓冲play播放pause暂停ended结束timeupdate当前播放时间发生改变的时候canplaythrough资源已经载入完成canplay缓冲至目前的可播放状态

标签：JavaScript，HTML5，video，audio，media

更多演示案例，查看案例演示

欢迎评论留言!

【本文地址】

公司简介

联系我们