как скачать часть видео в html5 и js - PullRequest
0 голосов
/ 26 апреля 2020

Я хочу загрузить или сохранить часть видео, которое воспроизводится на моем HTML, и я не хочу получать доступ к веб-камере и микрофону. Мне просто нужно загрузить или воспроизвести часть видео-тега в другом видео-теге или скачать его ... Как я могу это сделать? ... все, что я видел Доступ к микрофону и веб-камере

    <video id="yourVideoplayer" width="640" height="480" preload="auto"> //preload="auto" buffers the video if initialize. you cannot seek a video which isn t buffering already
  <source src="test.mp4" type="video/mp4" />
  <source src="test.ogv" type="video/ogg" /> 
  This browser is not compatible with HTML 5
</video>

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

1 Ответ

1 голос
/ 26 апреля 2020
<!DOCTYPE html>
<html>
<body>    
<video id="original-video" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
<video width="320" height="240" data-from="original-video" data-start="5" data-end="10" data-autoreplay="true" autoplay>
</video>
<video width="320" height="240" data-from="original-video" data-start="5" data-end="10" data-autoreplay="false" autoplay>
</video>
<script>
const body = document.querySelector('body');
const videos = document.querySelectorAll('video[data-from]');

videos.forEach(video=>{
    const originalVideo = document.getElementById(video.dataset.from);
    [...originalVideo.children].forEach(child=>{
        video.appendChild(child.cloneNode())
    });

    video.duration = Number(video.dataset.end) - Number(video.dataset.start);
    video.currentTime = video.dataset.start;

    video.addEventListener('timeupdate', (e)=>{
      if(video.currentTime>=video.dataset.end){
          video.pause();
          video.currentTime=video.dataset.start;
          if(video.dataset.autoreplay==="true"){
            video.play();
          }
      }
    });
});

</script>
</body>

Это самое близкое, что я мог получить к вашим требованиям. Атрибуты data используются для указания:

  • исходного видео
  • начала
  • конца
  • , если оно должно воспроизводиться без остановка
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...