Question

我的页面上有一个YouTube视频列表。我用下面的代码来获取youtube视频的图像封面，同时点击youtube图像封面，它会播放相应的youtube视频。但它仅适用于台式机。在移动设备上，每当我单击youtube图像封面时，它都会再次显示带有播放按钮的youtube图像，而不是直接播放youtube视频。

注意：我没有使用过youtube iframe_api等任何API。每个youtube视频都是简单的iframe，并编写了以下代码来显示youtube图片封面。

function youTubes_makeDynamic() {
        var $ytIframes = jQuery('iframe[src*="youtube.com"]');
        $ytIframes.each(function (i,e) {
            var $ytFrame = jQuery(e);
            var ytKey; var tmp = $ytFrame.attr('src').split(/\//); tmp = tmp[tmp.length - 1]; tmp = tmp.split('?'); ytKey = tmp[0];
            var $ytLoader = jQuery('<div class="ytLoader">');
            $ytLoader.append(jQuery('<img alt="youtube" class="cover lazyload" src="https://i.ytimg.com/vi/'+ytKey+'/hqdefault.jpg">'));
            $ytLoader.append(jQuery('<i class="playBtn material-icons">play_circle_outline</i>'));
            $ytLoader.data('$ytFrame',$ytFrame);
            $ytFrame.replaceWith($ytLoader);
            $ytLoader.click(function () {
                var $ytFrame = $ytLoader.data('$ytFrame');
                $ytFrame.attr('src',$ytFrame.attr('src')+'?autoplay=1');
                $ytLoader.replaceWith($ytFrame);
            });
        });
    };
    jQuery(document).ready(function () {youTubes_makeDynamic()});

这是我正在使用的代码。它可以在dekstop上运行，但按预期不会在移动设备上运行。

在移动设备上单击youtube拇指时，无法播放YouTube视频

0 个答案: