如何讓網頁內嵌的Youtube影片自動播放及重複播放?

hsw · 發表於 2022-5-5 17:38:15

馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社區。

您需要登錄才可以下載或查看，沒有帳號？立即註冊

x

因Youtube影片已經內定需開啟靜音才能自動播放,
所以傳統的老方法設定autoplay=1已失效,
今借用Youtube本身的API來讓網頁內嵌的Youtube影片自動播放及重複播放!!
語法如下請參考:

<div id="hsw00Player"></div>
<script>
var VID = 'cKI6HydZPWU';// *** 不同影片需修改此ID ***
var done = false;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('hsw00Player', {
videoId: VID, // YouTube 影片ID
width: 720, // 播放器寬度 (px)
height: 400, // 播放器高度 (px)
playerVars: {
autoplay: 1, // 在讀取時自動播放影片
controls: 1, // 在播放器顯示暫停／播放按鈕
showinfo: 0, // 隱藏影片標題
modestbranding: 1, // 隱藏YouTube Logo
loop: 1, // 讓影片循環播放
fs: 0, // 隱藏全螢幕按鈕
cc_load_policty: 0, // 隱藏字幕
iv_load_policy: 3, // 隱藏影片註解
autohide: 1, // 當播放影片時隱藏影片控制列
playlist: VID, // YouTube 影片ID 為了重複播放
},
events: {
onReady: function(e) {
e.target.mute();
e.target.playVideo();
},
onStateChange: function(r) {
if (r.data == 1 && !done) {
r.target.unMute();
r.target.playVideo();
done = true;
}
}
}
});
}
</script>

複製代碼

請享用...

月下老頭 · 發表於 2022-5-6 07:20:34

樓主發的帖子太深奧！需要我慢慢琢磨！

月下老土 · 發表於 2022-5-6 07:25:11

樓主發的帖子太深奧！需要我慢慢琢磨！

hsw · 發表於 2022-5-6 15:52:07

測試:

嘿嘿...成功...^^b

顏伊伊 · 發表於 2022-5-10 20:25:47

淚奔啊！眼淚止不住了，太有愛了！

顏伊伊 · 發表於 2022-5-10 20:30:12

hsw 發表於 2022-5-6 15:52
測試:

安娘為～

這不是要我這3C笨蛋的命嗎..

顏伊伊 · 發表於 2022-5-15 11:18:51

樓主發的帖子太深奧！需要我慢慢琢磨！

顏伊伊 · 發表於 2022-5-16 18:42:08

別逼我呀！我看了受不了啦。

顏伊伊 · 發表於 2022-5-18 21:32:43

顏伊伊發表於 2022-5-16 18:42
別逼我呀！我看了受不了啦。

因為嘿...我就看不懂咩

..所以........你就別逼我看壓

		自動登錄	找回密碼
密碼			立即註冊

[Javascript] 如何讓網頁內嵌的Youtube影片自動播放及重複播放?

[Javascript] 如何讓網頁內嵌的Youtube影片自動播放及重複播放?

馬上註冊，結交更多好友，享用更多功能，讓你輕鬆玩轉社區。

鮮花雞蛋

樓主熱門主題

樓主最新主題

點評

點評

點評

點評

點評

點評

笑話專家

主頁高手

榮譽管理

優秀版主

無敵神偷

肥羊達人

黑道教父

最佳人緣

多情種子

最佳肥羊

天蓬元帥

幸運之星

杯具之星

詛咒天王

最佳新人

閒聊高手

扯淡半仙

論壇元老

灌水大仙

股市大亨

遊戲天才

發帖新手

進取發帖

忠實發帖

熱心發帖

活躍發帖

發帖貢獻

發帖嘉許

發帖高手

資深發帖

發帖達人

發帖神手

推廣達人

簽到楷模

社區土豪

宣傳達人