我正在嘗試<video>通過 Javascript 插入 HTML5 元素，但它無法自動播放，盡管它??被靜音了。
背景背景關系
我想將我所有的 gif 資源轉換為 mp4 格式。同樣，我希望 HTMLvideo模擬 gif。它應包括以下屬性：
- 靜音
- 網頁加載后自動播放
- 無限回圈
- 排隊播放
我目前正在使用 Chrome 100。
我試過的
相關代碼保存在此 codepen中。我想通過 javascript 動態添加 HTML 視頻。但是，即使指定了自動播放和靜音屬性，這也無法自動播放。
但是，如果我在我的 HTML 中直接撰寫了具有相同屬性的視頻元素，那么自動播放功能就可以正常作業。
如何使用 JS 插入視頻并使其自動播放？
uj5u.com熱心網友回復：
我認為您可以像這樣設定屬性：
const anchor = document.querySelector('#anchor');
const vid = document.createElement('video');
anchor.appendChild(vid);
vid.autoplay = true;
vid.loop = true;
vid.muted = true;
vid.playsinline = true;
vid.src = 'https://www.w3schools.com/html/mov_bbb.mp4';
嘗試進行這些修改。如果它仍然不起作用，您可以在上面的代碼之后添加這個行內：
vid.play()
uj5u.com熱心網友回復：
看起來 Chrome 忽略muted了媒體加載之前設定的屬性。muted如果在媒體加載并可以播放時設定了該屬性，則視頻自動播放，可以通過canplay事件偵聽器進行檢查。
vid.oncanplay = () => {
vid.muted = true;
vid.play();
}
有了這個，您可以忽略最初設定autoplay和muted屬性。
const anchor = document.querySelector('#anchor');
const vid = document.createElement('video');
vid.setAttribute('loop', '');
vid.setAttribute('src', 'https://www.w3schools.com/html/mov_bbb.mp4');
vid.oncanplay = () => {
vid.muted = true;
vid.play();
}
anchor.appendChild(vid);body {
background-color: black;
color: white;
}<div id="anchor"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/465344.html
標籤：javascript html 视频 html5-视频