Youtube iframe api

215

29 июля 2018, 15:10

Появилась задача, нужно воспроизводить видео с youtube при наведении на картинку. Сделать получилось, но вот работает все это дело не очень.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 270px; height: 150px;
            overflow: hidden; position: relative;
            display: inline-block; margin: 15px;
        }
        .box .overlayer {
            position: absolute; left: 0; top: 0; width: 100%;
            height: 100%; z-index: 1;
        }
        .box img {width: 270px;}
    </style>
</head>
<body>
    <div class="box" data-video-id="668nUCeBHyY" data-hover="false">
        <img src="http://keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
    </div>
    <div class="box" data-video-id="r3fE6FQT82s" data-hover="false">
        <img src="http://keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
    </div>
    <div class="box" data-video-id="mcixldqDIEQ" data-hover="false">
        <img src="http://keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- <script src='https://www.youtube.com/iframe_api'></script> -->
    <script>
        var players = [];
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
        function onYouTubeIframeAPIReady() {
            $('.box').each(function(i) {
                $(this)
                    .attr('data-id', i)
                    .append('<div id="player-' + i + '">');
            });
            $('.box').mouseenter(function() {
                var $this = $(this);
                var debounced = _.debounce(function() {
                    if($this.attr('data-hover') === "true") {
                        var id = $this.attr('data-id');
                        var video_id = $this.attr('data-video-id');
                        if(players[id] && typeof players[id].playVideo === 'function') {
                            players[id].playVideo();
                        } else {
                            var player = new YT.Player('player-' + id, {
                                height: '150', width: '270',
                                videoId: video_id,
                                playerVars: { 
                                    'autoplay': 1,  
                                    'controls': 0,
                                    'disablekb': 1,
                                    'fs': 0,
                                    'iv_load_policy': 0,
                                    'modestbranding': 1,
                                    'rel': 0,
                                    'showinfo': 0
                                },
                                events: {
                                    'onReady': onPlayerReady
                                }
                            });
                            function onPlayerReady(event) {
                                // player.playVideo();
                                players[id] = player;
                            }
                        }
                        $this.find('img').hide();
                    }
                }, 1000);
                $this.attr('data-hover', 'true');
                debounced();
            });
            $('.box').mouseleave(function() {
                var $this = $(this);
                var id = $this.attr('data-id');
                if(players[id] && typeof players[id].stopVideo === 'function') {
                    players[id].stopVideo();
                }
                $this.attr('data-hover', false);
                $this.find('img').show();
            });
        }
    </script>
</body>
</html>

Эта ошибка появляется при каждом добавлении iframe. Так и не смог разобраться из-за чего. Искал, все пишут поменять http на https, сделал не помогло.

Еще не всегда срабатывается, когда наводишь мышь на картинку. Иногда глючит и не срабатывает автозапуск.

Может кто-то решал эту проблему? Или сталкивался с подобной задачей по воспроизведению видео?

Answer 1

Решил проблему с наведением мыши и воспроизведением видео. Проблема была в том, что я пытался запустить проигрыватель до того, как плеер загрузится со всеми функциями.

<html lang="en">
<head>
    <title>Document</title>
    <style>
            .box {width: 270px; height: 150px;overflow: hidden; position: relative;display: inline-block; margin: 15px;}
            .box .overlayer {position: absolute; left: 0; top: 0; width: 100%;height: 100%; z-index: 1;}
            .box .overlayer img {position: absolute;width: 30px; top: 10px; left: 10px;}
            .box img {width: 270px;}
            .box .video {width: 270px;height: 150px;}
            .layer {position: fixed;top: 0;left: 0;width: 100%;height: 100%;
                background: #fff;z-index: 1111;padding: 5rem;box-sizing: border-box;
            }
        </style>
</head>
<body>
    <div class="box" data-video-id="668nUCeBHyY" data-hover="false">
        <img src="http://keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
        <div class="overlayer">
            <img src="assets/images/play.png" class="playvideo" alt="">
        </div>
    </div>
    <div class="box" data-video-id="r3fE6FQT82s" data-hover="false">
        <img src="http://keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
        <div class="overlayer">
            <img src="assets/images/play.png" class="playvideo" alt="">
        </div>
    </div>
    <div class="box" data-video-id="mcixldqDIEQ" data-hover="false">
        <img src="http://keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
        <div class="overlayer">
            <img src="assets/images/play.png" class="playvideo" alt="">
        </div>
    </div>
    <div class="layer">
        Loading...
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src='https://www.youtube.com/iframe_api'></script>
    <script>
        var players = [];
        function onYouTubeIframeAPIReady() {
            $('.box').each(function(i) {
                playersCount++;
                $(this)
                    .attr('data-id', i)
                    .append('<div id="player-' + i + '">');
            }).each(function(i) {
                $('.layer').hide();
            });
        }
        function pasteFrame(el) {
            var $box = $(el);
            var $id = $box.attr('data-id');
            var player = new YT.Player('player-' + $id, {
                height: '150', width: '270',
                videoId: $box.attr('data-video-id'),
                playerVars: {
                    'autoplay': 0,  
                    'controls': 0,
                    'disablekb': 1,
                    'fs': 0,
                    'iv_load_policy': 0,
                    'modestbranding': 1,
                    'rel': 0,
                    'showinfo': 0
                },
                events: {
                    'onReady': onPlayerReady
                }
            });
            function onPlayerReady(event) {
                if($box.attr('data-hover') === 'true') {
                    $box.find('img').eq(0).hide();
                    player.playVideo();
                }
                player.setPlaybackQuality('small');
                players[$id] = player;
            }
        }
        $(document).ready(function() {
            $('.playvideo').mouseenter(function() {
                var $box = $(this).parent().parent();
                var $id = $box.attr('data-id');
                $box.attr('data-hover', 'true');
                if($box.find('iframe').length) {
                    players[$id].playVideo();
                    $box.find('img').eq(0).hide();
                } else {
                    pasteFrame($box);
                }
            });
            $('.playvideo').mouseleave(function() {
                var $box = $(this).parent().parent();
                var $id = $box.attr('data-id');
                $box.find('img').eq(0).show();
                $box.attr('data-hover', 'false');
                if($box.find('iframe').length && players[$id]) {
                    players[$id].stopVideo();
                }
            });
        });
    </script>
</body>
</html>

Теперь все видео нормально воспроизводятся при наведении, но проблема из консоли не исчезла, в сети много кто писал об этой проблеме и у всех разные проблемы, буду пробовать.

ПОСЛЕДНИЕ ВОПРОСЫ

21:33

Виртуальный выделенный сервер (VDS) становится отличным выбором
22:26
22:40

Создание игр для детей: первые шаги в IT мире
08:34
15:01

Основные задачи SEO оптимизатора
17:01
11:24

Выделенный сервер для игр: преимущества и недостатки
10:16
17:54

Все вопросы

ТОП-10

Все популярные вопросы

Смена css кода по клику

Есть вот такой код по клику на кнопку меняется фон и цвет текста body, как сделать что бы по клику той же кнопки менялись стили любого элемента(тега,...

208

javascript

Как javascript работает с таймаутами (setTimeout, setInterval)?

Интересует именно куда эти таймауты помещаются, как очищаютсяА также где хранится информация о том, когда их нужно выполнить

160

javascript

JavaScript параметры Dom элемента

Видел видео как тип прописал какую то команду в js скрипте и ему выбило весь список параметров для этого объекта в браузереКак это сделать...

201

javascript

Метод по изменению цвета Row в Table

метод deleteRow удаляет строку с таблице, а есть такой метод что бы менял цвет ?

210