HTML видео с Javascript - PullRequest
Новая
       8

HTML видео с Javascript

0 голосов
/ 20 января 2019

Хотел бы найти способ обойти это.

В настоящее время есть модальный блок, который сформирован из JavaScript, все элементы стиля присутствуют в файле CSS.Модальное появляется только после щелчка по элементу, JS берет ссылку и путь к файлу из исходного HTML и помещает их в модальное, созданное внутри кода JS.

Вопрос в том, как и каким способом перейти от изображения к видеофайлу, чтобы сохранитьэто же ждать что JS получит и обработает всю информацию?JS предполагает использовать только путь к файлу и формировать теги видео, как с изображением.

Ссылка на код и проблемы.

HTML-код 

<dt><a href="#" class="rm-viewdetails" data-thumb="images/13.jpg">Gourmet Yam Taohu</a></dt>
                                    <dd>Thai tofu salad yam taohu</dd>

JS CODE 

viewDetails = function( recipe ) {

        var title = recipe.text(),
            img = recipe.data( 'thumb' ),
            description = recipe.parent().next().text(),
            url = recipe.attr( 'href' );

        var $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image: url(' + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>' );

        $modal.appendTo( $container );

        var h = $modal.outerHeight( true );
        $modal.css( 'margin-top', -h / 2 );

        setTimeout( function() {

            $container.addClass( 'rm-in rm-nodelay' );

            $modal.find( 'span.rm-close-modal' ).on( 'click', function() {

                $container.removeClass( 'rm-in' );

            } );

        }, 0 );

    };

1 Ответ

0 голосов
/ 20 января 2019

Я не уверен, но похоже, что вы пытаетесь воспроизвести видео, когда пользователь щелкает элемент, содержащий изображение.Если это так, вы можете использовать элемент HTML5 video, который имеет встроенный атрибут poster для размещения изображения-заполнителя.(Подробнее см. HTML5 видео .)

Вы бы просто добавили элемент source (с собственным атрибутом src, установленным для пути вашего видео) внутри элемента видео, дайтевидеоэлемент атрибут controls и подождите, пока пользователь нажмет встроенную кнопку воспроизведения.(Обратите внимание, что некоторые браузеры требуют, чтобы источник видео был отформатирован как mp4.).Чтобы избежать проблем совместимости между браузерами, определите несколько типов видео (несколько элементов source)

...