Как воспроизвести видео в слайдере изображений jQuery? - PullRequest
Новая
       7

Как воспроизвести видео в слайдере изображений jQuery?

0 голосов
/ 03 февраля 2019

У меня есть слайдер jQuery, который я написал в jQuery на сайте WordPress.

Я хочу включить воспроизведение видео, если расширение src равно "mp4".

Есть идеи?

Вот пример сгенерированного HTML: (обратите вниманиепервая img src - это ссылка на видео)

Я бы хотел, чтобы посетитель нажал кнопку воспроизведения, чтобы начать видео. 

<div id="img-container" style="width: 2828.1px; padding-right: 886px;">                    
    <div class="picture_holder">
        <div class="picture">
            <img src="/wp-content/uploads/2015/12/VideoClip.mp4" height="1080" width="842" alt="" title="" style="height: 414px; width: 323px;">
            <h4 class="captioning"><br><span class="rtl"></span></h4>
        </div>
    </div>

    <div class="picture_holder">
        <div class="picture">
            <img src="/wp-content/uploads/2017/03/railings.png" height="612" width="600" alt="" title="" style="height: 414px; width: 230px;">
            <h4 class="captioning"><br><span class="rtl"></span></h4>
        </div>
    </div>


    <div class="picture_holder">
        <div class="picture">
            <img src="/wp-content/uploads/2017/03/railing-1.png" height="600" width="462" alt="" title="" style="height: 414px; width: 177px;">
            <h4 class="captioning"><br><span class="rtl"></span></h4>
        </div>
    </div>

    <div style="clear: left;"></div>
</div>

1 Ответ

0 голосов
/ 03 февраля 2019

Вот код, который я искал: (заменит каждую ссылку mp4 на видео тег): 

$('.picture_holder .picture > img').each(function(index){
               console.log("index="+index+"  Video src = "+ $(this).attr('src') + "<<<");
               let imgsrc = $(this).attr('src');
               if (imgsrc.indexOf(".mp4") >0) {
                   console.log("want to replace");
                   $(this).parent().prepend('<video width="320" height="600" controls><source src="'+imgsrc+'" type="video/mp4"></video>');
                   $(this).remove();
               } 
        });

Он заменяет элемент img элементом video.

Я использую parent().prepend() просто потому, что replaceWith() здесь не работает.

По-прежнему не хватает нескольких исправлений для его правильного размещения, но это работает.

...