单击图像后尝试使自动播放工作答案

【问题标题】：Trying to get autoplay to work after the image is clicked单击图像后尝试使自动播放工作
【发布时间】：2018-11-12 09:38:00
【问题描述】：

现在点击后不会自动播放：

1.)

https://jsfiddle.net/byw5szgt/200/

这里的这件作品应该适用于：

  const enableAutoplay = (el) => el.src.replace("autoplay=0", "autoplay=1");
  const autoplay = (el) => el.setAttribute("src", enableAutoplay(el));

这个：

  window.onYouTubePlayerAPIReady = function() {
          const video = document.querySelector(".video");
          const videoId = video.getAttribute("data-id");
          state.player = new YT.Player(video, {
                      width: 606,
                      height: 344,
                      videoId: videoId,
                      playerVars: {
                          autoplay: 0,

我不知道如何让它们工作。

2.) 仅仅这样做是行不通的：

https://jsfiddle.net/byw5szgt/201/

  playerVars: {
    autoplay: 1,

在 jsfiddle 之外的 firefox 或 Chrome 中，您可以清楚地看到它在单击图像之前自动播放。它开始在图像后面播放。

这就是为什么代码需要使用 1.) 中的设置方式，但我似乎不知道该怎么做。

html

 <div class="video" data-id="M7lc1UVf-VE"></div>

这是完整的 javascript 代码：

(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");
    const hide = (el) => el.classList.add("hide");
    const enableAutoplay = (el) => el.src.replace("autoplay=0", "autoplay=1");
    const autoplay = (el) => el.setAttribute("src", enableAutoplay(el));

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        const wrapper = cover.parentNode.querySelector(".wrapg");
        hide(cover);
        show(wrapper);
        autoplay(wrapper);
    }
    const cover = document.querySelector(".jacketc");
    cover.addEventListener("click", coverClickHandler);
}());
(function videoPlayer() {
    "use strict";

    function onPlayerReady(evt) {
        const player = evt.target;
        player.setVolume(50); // percent
    }
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    window.onYouTubePlayerAPIReady = function() {
        const video = document.querySelector(".video");
        const videoId = video.getAttribute("data-id");
        new YT.Player(video, {
            width: 606,
            height: 344,
            videoId: videoId,
            playerVars: {
                autoplay: 0,
                controls: 1,
                showinfo: 1,
                rel: 0,
                iv_load_policy: 3,
                cc_load_policy: 0,
                fs: 0,
                disablekb: 1
            },
            events: {
                "onReady": onPlayerReady
            }
        });
    };
}());

【问题讨论】：

您可以尝试不使用 IIFE 而是调用该函数。

标签： javascript youtube youtube-api

【解决方案1】：

el传入enableAutoplay是

<div class="wrapg hide"><!---//--></div>

你需要修改div.wrapg中子iframe的src属性。

查询div.wrapg的iframe并进行修改可以这样完成：

const enableAutoplay = (el) => {
  const widget = el.querySelector("#widget2")
  widget.src = widget.src.replace("autoplay=0", "autoplay=1");
};

【讨论】：