我试图嵌入新的iframe版本的YouTube视频,并让它自动播放。
据我所知,没有办法通过修改URL的标志来做到这一点。有办法通过使用JavaScript和API来做到这一点吗?
我试图嵌入新的iframe版本的YouTube视频,并让它自动播放。
据我所知,没有办法通过修改URL的标志来做到这一点。有办法通过使用JavaScript和API来做到这一点吗?
当前回答
现在我在iframe标签上添加了一个新的属性“allow”,例如:
允许= "加速度计;播放;加密介质;陀螺仪; 画中画”
最终代码是:
<iframe src="https://www.youtube.com/embed/[VIDEO-CODE]?autoplay=1"
frameborder="0" style="width: 100%; height: 100%;"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
其他回答
我没有找到iframe实现的工作示例。 其他问题只与Chrome有关,这透露了一点。
为了在Chrome上自动播放,你必须静音声音mute=1。FF和IE似乎工作得很好,使用autoplay=1作为参数。
<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>
youtube的内嵌代码默认是自动播放的。只需在“src”属性的末尾添加autoplay=1。例如:
<iframe src="http://www.youtube.com/embed/xzvScRnF6MU?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>
2018年12月,
寻找一个自动播放,循环,静音youtube视频的反应。
其他答案都不奏效。
我用一个库找到了一个解决方案:react-youtube
class Video extends Component {
_onReady(event) {
// add mute
event.target.mute();
// add autoplay
event.target.playVideo();
}
render() {
const opts = {
width: '100%',
height: '700px',
playerVars: {
// remove video controls
controls: 0,
// remove related video
rel: 0
}
};
return (
<YouTube
videoId="oHg5SJYRHA0"
opts={opts}
// add autoplay
onReady={this._onReady}
// add loop
onEnd={this._onReady}
/>
)
}
}
如果有人正在寻找,这是一个完美的解决方案,自动播放*是这里的关键,这在任何地方都没有提到。
<iframe allow="autoplay *; fullscreen *" allowfullscreen="true"
src="https://example.com">
</iframe>
&如果你想惰性加载YouTube视频完全使用这个-
<iframe
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/unICbsPGFIA?autoplay=1><img src=https://img.youtube.com/vi/zEkgWzi5T-Y/hqdefault.jpg><span>▶</span></a>"
src="https://www.youtube.com/embed/unICbsPGFIA?autoplay=1&loop=1&playlist=zEkgWzi5T-Y"
frameborder="0"
allow="accelerometer; autoplay *; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
这适用于Chrome,但不适用于Firefox 3.6(警告:RickRoll视频):
<iframe width="420" height="345" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1" frameborder="0" allowfullscreen></iframe>
iframe嵌入的JavaScript API是存在的,但是仍然作为一个实验特性发布。
更新:iframe API现在完全支持和“创建YT。播放器对象-示例2”展示了如何在JavaScript中设置“自动播放”。