Question

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

1。）

此处的作品应与以下作品一起使用：

  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
            }
        });
    };
}());

Answer 1

在el中传递的

enableAutoplay是

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

您需要为src中的子项iframe修改div.wrapg属性。

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

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

单击图像后尝试使自动播放正常工作

1 个答案: