使用JavaScript控制<video>视频播放
文章来源：小凝 时间：2025-03-11
HTML <video> 元素 用于正在 HTML 大概 XHTML 文档中嵌进媒介播搁器，用于救援文档内乱的瞅频播搁。您也能够将 <video> 标签用于音频内乱容，然则 <audio> 元素大概正在用户领会上更适宜。
正在没有撑持 video 元素的阅读器中，<video></video> 标签中央的内乱容会表现，看成落级处置。
controls属性
加入那个属性，阅读器会正在瞅频底部供应1个操纵里板，承诺用户操纵瞅频的播搁，包含音量，跨帧，停息/复兴播搁。
详细参照：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
那里没有应用controls曲交应用JS去操纵瞅频的播搁战停息等效用。
达成性能以下：
（1）能够播搁，停息，遏制瞅频。
（2）能够转变播搁快度（2倍快度加快播搁，1半的快度缓快播搁，平常快度播搁）
（3）播搁时有入度条，共时借能表现已播搁工夫。
（4）经由过程转变SRC转变播搁的瞅频内乱容
代码以下：
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>瞅频播搁操纵</title></head><style>#durationBar{border:solid1px#164900;width:450px;margin-bottom:5px;}#positionBar{height:20px;color:white;font-weight:bold;background:#2D9900;text-align:center;}</style><script>//播搁functionplay(){varvideo=document.getElementById("videoPlayer");video.play();}//停息functionpause(){varvideo=document.getElementById("videoPlayer");video.pause();}//遏制functionstop(){varvideo=document.getElementById("videoPlayer");video.pause();video.currentTime=0;}//速搁functionspeedUp(){varvideo=document.getElementById("videoPlayer");video.play();video.playbackRate=2;}//缓搁functionslowDown(){varvideo=document.getElementById("videoPlayer");video.play();video.playbackRate=0.5;}//平常快度functionnormalSpeed(){varvideo=document.getElementById("videoPlayer");video.play();video.playbackRate=1;}//入度条相干functionprogressUpdate(){varvideo=document.getElementById("videoPlayer");//动静设立入度条varpostionBar=document.getElementById("positionBar");postionBar.style.width=(video.currentTime/video.duration*100)+"%";//建设播搁期间displayStatus.innerHTML=(Math.round(video.currentTime*100)/100)+"秒";}functionbtnChangeA(){constvideo=document.getElementById('videoPlayer');video.src='test.mp4';video.load();video.play();}functionbtnChangeB(){constvideo=document.getElementById('videoPlayer');video.src='test2.mp4';video.load();video.play();}</script><body><videocontrolsid="videoPlayer"width="450px"height="300"ontimeupdate="progressUpdate()"></video><divid="durationBar"><divid="positionBar"><spanid="displayStatus">0秒</span></div></div><buttonid="btnChange"onclick="btnChangeA()">播搁A</button><buttonid="btnChange"onclick="btnChangeB()">播搁B</button> <buttononclick="play()">播搁</button><buttononclick="pause()">停息</button><buttononclick="stop()">遏制</button> <buttononclick="speedUp()">速搁</button><buttononclick="slowDown()">缓搁</button><buttononclick="normalSpeed()">平常</button></body></html>其余解说：
要操纵瞅频从指准时间最先播搁，能够应用video元素的currentTime属性。
currentTime属性示意瞅频以后播搁的岁月（以秒为单元），能够创立该属性去操纵望频从指依时间最先播搁。
比方，假若要从瞅频的第10秒最先播搁，能够应用以停代码：
const video = document.getElementById('myVideo');
video.currentTime = 10;
而后，移用video元素的play()办法最先播搁瞅频
poster属性，用于指定望频的预览图
瞅频没法主动播搁
autoplay属性得效
HTML5规范规则：video标签建立autoplay属性后，当页里添载告竣时，媒介资本将主动最先播搁。
但是，正在现实开辟进程中发明，给video标签设立autoplay属性，正在许多挪动建筑的阅读器中是没法告竣主动播搁的。
正在iphone上干尝试，创造autoplay属性正在safari里失效、正在Wechat里无效。
检查苹果开辟者要旨的文档,涌现苹果对于video标签的autoplay属性干了以下规则：
In Safari on iOS (for all devices, including iPad),
where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled.
所以，正在ios体系的safari阅读器中树立autoplay是失效的；
另外好多安卓机阅读器也采纳了禁用autoplay的计谋。
挪用play()办法失效
持续正在iphone上干尝试，正在页里添载完工后挪用play()办法，实验兑现主动播搁的结果。
浮现正在safari里望频不播搁，正在Wechat里望频最先播搁。
苹果开辟者重点的文档一样对于ios设置上的safari阅读器中，play()办法的触收机会干了规则：
No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback,
unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
也便是道，正在safari里，须要把play()办法绑定到用户接互事项（eg.onclick,ontouchstart），当用户接互事项触收时，play()才会施行。
若是把play()办法绑定到非用户接互事项（eg.onload）,该变乱被触收时play()没有会被施行。
END
推举您浏览更多相关于“ jsJavaScript瞅频video播搁 ”的作品
文章推荐
Copyright © 2024-2025 燿动吧 – 知识分享，快乐你我，燿动青春 http://www.yaodong8.com All Rights Reserved 网站地图