Показать видео без обложки - PullRequest
0 голосов
/ 09 декабря 2018

Что я хочу сделать, так это снять крышку и показать видео вместо этого.Как я смогу это сделать?Кажется, я не могу понять.

Все, что я хочу сделать, это снять крышку с кода и показать видео.

Рабочий код:

https://jsfiddle.net/sx87fa65/23/

После того, как я удалю обложку из кода, видео не появится.

Как я могу заставить видео появляться без обложки наэто?

Я хочу, чтобы он загружался на экран без крышки.

Javascript

const load = (function() {
    "use strict";

    function _load(tag) {
        return function(url) {
            return new Promise(function(resolve) {
                const element = document.createElement(tag);
                const parent = "body";
                const attr = "src";
                element.onload = function() {
                    resolve(url);
                };
                element[attr] = url;
                document[parent].appendChild(element);
            });
        };
    }
    return {
        js: _load("script")
    };
}());
(function manageCover() {
    "use strict";
    const hide = (el) => el.classList.add("hide");

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

    function onPlayerReady(event) {
        const player = event.target;
        player.setVolume(0); // percent
    }

    function onPlayerStateChange(event) {
        const player = event.target;
        const playerVars = player.b.b.playerVars;
        if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
            player.seekTo(playerVars.start);
        }
    }

    function addVideo(video) {
        new YT.Player(video, {
            videoId: video.dataset.id,
            width: 606,
            height: 344,
            playerVars: {
                autoplay: 1,
                controls: 1,
                rel: 0,
                iv_load_policy: 3,
                cc_load_policy: 0,
                fs: 0,
                disablekb: 1,
                loop: true,
                start: 200,
                end: 204
            },
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        });
    }

    function init(opts) {
        load.js("https://www.youtube.com/player_api").then(function() {
            YT.ready(function() {
                addVideo(opts.video);
            });
        });
    }
    return {
        init
    };
}());
(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function initPlayer(wrapper) {
        videoPlayer.init({
            video: wrapper.querySelector(".video")
        });
    }

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        initPlayer(wrapper);
    }
    const cover = document.querySelector(".jacketc");
    cover.addEventListener("click", coverClickHandler);
}());
...