>html ~~~ <video id="myVideo" preload controls loop muted poster="封面" > <source src="视频地址" type="video/mp4"/> </video> ~~~ >js ~~~ let myVideo = document.querySelector('#myVideo'); setTimeout(() => { console.log(myVideo.currentSrc); }, 1000) //设置音量为50% myVideo.volume = 0.5; //1、loadstart：视频查找。当浏览器开始寻找指定的音频/视频时触发，也就是当加载过程开始时 myVideo.addEventListener('loadstart', e => { console.log('视频的元数据已加载'); console.log(e) }) // 2、durationchange：时长变化。当指定的音频/视频的时长数据发生变化时触发，加载后，时长由 NaN 变为音频/视频的实际时长 myVideo.addEventListener('durationchange', function (e) { console.log('提示视频的时长已改变') console.log(e) console.log(myVideo.duration) //4.08 视频的实际时长（单位：秒） }) // 3、loadedmetadata ：元数据加载。当指定的音频/视频的元数据已加载时触发，元数据包括：时长、尺寸（仅视频）以及文本轨道 myVideo.addEventListener('loadedmetadata', function (e) { console.log('提示视频的元数据已加载') console.log(e) }) // 8、play：播放监听 myVideo.addEventListener('play', function (e) { console.log('提示该视频正在播放中') console.log(e) }) // 9、pause：暂停监听 myVideo.addEventListener('pause', function (e) { console.log('暂停播放') console.log(e) }) ~~~ ***** ### 微信浏览器自动播放和默认全屏 >在移动端浏览器，`video`在用户点击播放或者通过`API video.play()`触发播放时，会强制以全屏置顶的形式进行播放，设计的初衷可能是因为全屏能提供更好的用户体验。 ~~~ <video id="player" controls autoplay x5-video-player-type="h5" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-orientation="portraint" x5-video-player-fullscreen="true"> <source src="..." type="video/mp4"> </video> ~~~ >`playsinline="true" webkit-playsinline="true`解决 iOS 自动播放全屏问题 >`x5-video-player-type="h5" x5-video-player-fullscreen="true"`解决安卓同层级播放 iOS 微信下通过 WeixinJSBridgeReady 事件进行自动播放 ~~~ document.addEventListener( 'WeixinJSBridgeReady', function() { var video = document.getElementById("player"); video.play(); }, false ); ~~~ Android 可以尝试监听 touchstart 事件，用户触摸屏幕后自动播放 ~~~ document.addEventListener('touchstart', function(){ var video = document.getElementById("player"); video.play(); }, false); ~~~ >HTML5视频/音频加载过程中会依次触发如下事件： >1. loadstart; >2. durationchange; >3. loadedmetadata; >4. loadeddata; >5. progress; >6. canplay; >7. canplaythrough 1. 当浏览器开始寻找指定的音频/视频时，即开始加载视频时，发生 loadstart 事件。 2. 当指定音频/视频的时长数据发生变化时，会发生 durationchange 事件。当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长。 3. 音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道。当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。 4. 当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。 5. 当浏览器正在下载指定的音频/视频时，会发生 progress 事件。 6. 当浏览器能够开始播放指定的音频/视频时，会发生 canplay 事件。 7. 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。 ~~~ <video id="video1" controls="controls" loop></video> <script> myVid=document.getElementById("video1"); myVid.onduratiοnchange=alert("The video duration has changed"); myVid.onloadedmetadata=alert("Meta data for video loaded"); myVid.onduratiοnchange=alert("The video duration has changed"); myVid.οnlοadstart=alert("loadstart"); myVid.onduratiοnchange=alert("The video duration has changed"); myVid.onloadedmetadata=alert("Meta data for video loaded"); </script> ~~~