我正试图实现一个自定义控件的背景视频(倒带5秒,降低播放速度)。我想使用YouTube链接作为视频源,我不希望任何YouTube信息显示,也没有默认控件。
我试过使用iframe和video标签,但是iframe不能改变速度,也不能倒带(从我收集的信息来看),video标签不能使用YT链接。
通过这样做,我从youtube得到错误代码M2 sXarBf-_A4NpgU(基本上告诉我视频无法加载,但它没有说明原因,我在控制台上没有得到任何错误)。
let player
function onYouTubeIframeAPIReady() {
console.log("api loaded")
player = new YT.Player("myvid", {
videoID: "QPjHCAHfjoU",
host: 'https://www.youtube.com',
playerVars: {
autoplay: 1,
muted: 1,
controls: 0,
origin: 'http://127.0.0.1:3000/client/main.html'
}
})
}
#myvid {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
}
.video-background {
background: #000;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
}
<div class="video-background">
<div class="video-foreground">
<div id="myvid"></div>
</div>
</div>
1条答案
按热度按时间eimct9ow1#
but the iframe can't change the speed nor rewind
我相信你可以使用iframe
来实现这一点,你可能已经错过了添加函数来做同样的事情。我相信你提供的代码只有这么多。创建一个自定义视频播放器并添加JavaScript函数用于倒带和速度控制。对于. eg HTML
JS