HTML5 _ Как добавить гиперссылки на видео маркеры - PullRequest
Новая
       22

HTML5 _ Как добавить гиперссылки на видео маркеры

0 голосов
/ 28 апреля 2019

Как добавить гиперссылки на веб-сайт, чтобы запустить видео со времени, указанного в src1, src2 и src3 .html5-doc? Это должен сделать любой, кто может посетить сайт. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>

<video controls>

<source src1="C417.mp4#t=0,5"
      type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>


<source src2="C417.mp4#t=5,10"
      type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>


  <source src3="C417.mp4#t=10,15"
      type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>

</video>

</body>
</html>

Спасибо

Обновление : Попробовал некоторые. Как правильно прикрепить функцию к кнопке? Видео должно быть запущено через 5 секунд нажатием кнопки. Это не работает как здесь: 

  <video controls>
    <source id="video_ID1" src="C111a.mp4"
            type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
    </video>

    <button onclick="bxClick1()">5sec</button>

        <script>
            function bxClick1() {
                document.getElementById("video_ID1").addEventListener('loadedmetadata', function() 
            {
                    this.currentTime = 5;
            }, false);                
        }
        </script>

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

1 Ответ

0 голосов
/ 01 мая 2019

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

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

См. Пример ниже - предполагается, что вы добавляете идентификаторы к своим видео: 

<source id ="videoID_1" src1="C417.mp4"
      type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>    

document.getElementById('videoID_1').addEventListener('loadedmetadata', function() 
      {
        this.currentTime = 5;
      }, false);
...