如何解决尽管参数和属性正确,但注入的YouTube iFrame无法自动播放
我在页面上输出了一堆Youtube iFrame。由于加载所有这些都会带来性能问题,因此我有一个脚本,当用户单击相关的缩略图时,该脚本将注入iFrame makrkup。
问题是,在铬浏览器中,尽管具有&autoplay=1
参数和allow="autoplay;"
属性,但视频无法自动播放。 (在这里稍作修正,我应该说视频的自动播放不一致-可能有20%的时间。)
如果我添加&mute=1
,则每次都会播放视频,但这是不可接受的。
如果我将标记直接复制并粘贴到页面上(即脚本运行后生成的内容),则每次都会播放。
<div class="lazyloaded-video" data-youtube-video="tmQkY0QBGXA"><img src="https://picsum.photos/id/77/560/315" class="lazyloaded-video__placeholder"></div>
function youtubeLazyLoad() {
var lazyloadedVideo = $('.lazyloaded-video');
// Check if the video class is present
if (lazyloadedVideo.length) {
// On click we will remove the img and add the iframe along with with the full video URL.
$('.lazyloaded-video__placeholder').click(function (e) {
var lazyLoadedVideoID = $(this).parent(lazyloadedVideo).data('youtube-video');
$(this).parent(lazyloadedVideo).html(
'<iframe class="iframe" width="560" height="315" allow="autoplay;" frameborder="0" src="https://www.youtube.com/embed/' + lazyLoadedVideoID + '?autoplay=1" ></iframe>'
);
});
}
}
youtubeLazyLoad();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。