Изменения размера видео в формате HTML5 при загрузке другого источника

У меня есть видео на веб-сайте, используя тег <video>.Изменения размера видео в формате HTML5 при загрузке другого источника

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

Вот что я имею в виду: http://i.imgur.com/VD4FTpp.gif

Как вы можете увидеть видео теряет ширина/высота при загрузке нового источника, я положил, что красная кайма, чтобы показать эффект.

код, который может воссоздать проблему:

<html> 
 
<head> 
 
\t <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
</head> 
 
<video preload="metadata" autoplay poster="data:image/gif,AAAA" class="preview-video" id="video" style="border: 5px red solid;"> 
 
\t <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" id="videoSource"> 
 
\t Your browser does not support the video tag. 
 
</video> 
 
     <br /> 
 
<br /> 
 
<button id="loadOther">Next Video</button> \t 
 

 
<script> 
 
\t $("#loadOther").click(function() { 
 
\t \t $("#videoSource").attr("src", "http://www.w3schools.com/html/mov_bbb.mp4"); 
 
     $("#video")[0].load(); 
 
\t }); 
 
</script> 
 

 
    
 
</html>

источник

2016-12-18 Ham. Abdu2

Если все, что вы хотите на самом деле, чтобы избежать ширина/высота, чтобы вернуться к значениям по умолчанию (300 х 150), когда следующий видео загружайте, вам просто нужно установить width и height свойствам загружаемого видео (videoWidth и videoHeight - это реальные значения носителя, а не те элементы).

// fix the element's width and height properties to the current video ones 
 
$("#video").on('loadedmetadata', function() { 
 
    this.width = this.videoWidth; 
 
    this.height = this.videoHeight; 
 
}); 
 

 
$("#loadOther").click(function() { 
 
    $("#videoSource").attr("src", "http://www.w3schools.com/html/mov_bbb.mp4"); 
 
    $("#video")[0].load(); 
 
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<video preload="metadata" autoplay poster="data:image/gif,AAAA" class="preview-video" id="video" style="border: 5px red solid;"> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" id="videoSource"> 
 
    Your browser does not support the video tag. 
 
</video> 
 
<br /> 
 
<br /> 
 
<button id="loadOther">Next Video</button>

Тем не менее, этот код будет также изменить высоту по ширине элемента, если следующий загруженный носитель не имеет такой же размер, как и предыдущий. Чтобы избежать этого, просто используйте .one() или удалите прослушиватель событий после его запуска.

источник

2016-12-19 01:13:47 Kaiido

Спасибо, к сожалению, это беспорядок мобильной поддержки, я использую bootstrap, и видео находится в столбце начальной загрузки. –

Затем попробуйте с помощью 'this.clientWidth' и' this.clientHeight' вместо videoWidth – Kaiido

Это сделало трюк, спасибо. –

Изменения размера видео в формате HTML5 при загрузке другого источника

ответ

Смежные вопросы