Воспроизведение видео затем onended () с наложением неподвижного изображения со ссылками - PullRequest
Новая
       10

Воспроизведение видео затем onended () с наложением неподвижного изображения со ссылками

0 голосов
/ 28 сентября 2018

Я очень новичок в HTML5, поэтому я пытаюсь найти самый простой способ воспроизведения готового видео из Adobe After Effects в HTML5, а затем заменить последний кадр неподвижным изображением с кликабельными значками.

1) Я пробовал много примеров JS, JQuery, отлично работает, но я не могу заменить видео чем-то другим, так как я не могу сделать их поверх друг друга.2) Я думал сделать это в Adobe Animate CC или ActionScript для полного SWF-файла, который в конце концов станет ссылками, которые можно нажимать, но это слишком сложный процесс.

Есть идеи относительно подхода JS / JQuery?

Обновление @jms. Я реализовал вашу идею: 

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<script src=
"http://ajax.googleapis.com/ajax/
 libs/jquery/1.11.2/jquery.min.js">
</script>
<body>
<script>
document.querySelector('#videoPlayer').addEventListener('progress', 
function(evt) {
if(evt.total-evt.loaded <= 1) {
    evt.target.pause();
    document.querySelector('.over-buttons').classList.add('show-icons');
} 
}</script>


<div class="video-container">
<video id="videoPlayer" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
</video>
<div class="over-buttons">YOUR ELEMENTS THAT WILL BE SHOWED IN THE LAST 
SECOND </div>
</div>

</body>
</html>

1 Ответ

0 голосов
/ 28 сентября 2018

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

<div class="video-container">
    <video id="videoPlayer" src="resource_url"></video>
    <div class="over-buttons"><!--YOUR ELEMENTS THAT WILL BE SHOWED IN THE LAST SECOND --></div>
</div>

Затем вы можете прикрепить событие progress к элементу видео и, когда это было в последнюю секунду (по сравнению, например, со свойством video duration или свойством loaded).события), затем вы можете приостановить видео и добавить класс, который показывает over-buttons div 

document.querySelector('#videoPlayer').addEventListener('progress', function(evt) {
    if(evt.total-evt.loaded <= 1) {
        evt.target.pause();
        document.querySelector('.over-buttons').classList.add('show-icons');
    } 
}

Edit 1: я сделал небольшой пример.Я проверил, что некоторые навигаторы не генерируют правильно событие прогресса, поэтому лучше вручную проверять с интервалом текущую позицию видео.Вы можете проверить это на jsfiddle https://jsfiddle.net/8mfwv0zc/1/

...