Попытка заставить автоигру работать после нажатия на изображение - PullRequest
Новая
       4

Попытка заставить автоигру работать после нажатия на изображение

0 голосов
/ 12 ноября 2018

Сейчас он не воспроизводится автоматически после нажатия:

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,

Внутри Firefox или Chrome, вне jsfiddle, вы можете ясно видеть, что он автоматически воспроизводится до щелчка по изображению. Это начинает играть позади изображения.

Вот почему код должен работать с тем, как он настроен в 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
            }
        });
    };
}());

1 Ответ

0 голосов
/ 18 ноября 2018

el передано в enableAutoplay is 

<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");
};
...