Контролируйте начальную позицию и продолжительность воспроизведения в видео HTML5, а затем загрузите определенную продолжительность этого видео - PullRequest
Новая
       12

Контролируйте начальную позицию и продолжительность воспроизведения в видео HTML5, а затем загрузите определенную продолжительность этого видео

0 голосов
/ 15 января 2019

У меня есть видео за 10 секунд, которое я хотел бы контролировать с помощью HTML5. Для пользователя есть 2 поля ввода. Одним из них является время начала (например, 3 секунды) в первом окне и продолжительность воспроизведения (6 секунд) во втором окне. Например, они могут захотеть запустить видео через 3 секунды и воспроизвести в течение 6 секунд. Как я могу загрузить определенную часть этого видео или показать эту часть видео в другом элементе видео и загрузить его?

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

Я пытался реализовать его методом canvas drawImage(), но он ничего не отображает в canvas. 

function extractFunction(){
    video.addEventListener('timeupdate', function() {

        if (video.currentTime >= endTime) {
            this.pause;
        }
    }, false);

    video.load();
    video.play();
    try {
        video.currentTime = starttime;
        ctx.drawImage($this, 0, 0);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
    } catch (ex) {
    }
}

В приведенном выше коде у меня есть кнопка, которая активирует эту функцию.

Ответы [ 2 ]

0 голосов
/ 15 января 2019

Чтобы установить текущее время видео, я использую vid.currentTime = 2; Это означает, что видео начинается со второй секунды.

Также if (vid.currentTime <= 4) ctx.drawImage(vid, 0, 0, cw, ch); означает, что если текущее время меньше 4 секунд, видео будет отображаться на холсте. 

let vid = document.getElementById("vid");
let canvas = document.getElementById("cnv");
let ctx = canvas.getContext("2d");

let cw = (canvas.width = 360);
let ch = (canvas.height = 450);

// set the video's current time
vid.currentTime = 2;

vid.addEventListener(
  "play",
  () => {
    paintVideo(vid, ctx, cw, ch);
  },
  false
);

function paintVideo() {
  requestAnimationFrame(paintVideo);
  // if the video is paused or ended return
  if (vid.paused || vid.ended) {
    return;
  }
  // get the currentTime and if it's <= 4 paint the video on the canvas
  if (vid.currentTime <= 4) ctx.drawImage(vid, 0, 0, cw, ch);
}
canvas{border:1px solid}
<video id="vid" controls>
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/twitter_cat.mp4"  type="video/mp4">
</video>
<canvas id="cnv"></canvas>
0 голосов
/ 15 января 2019 
function extractFunction(){
    video.addEventListener('timeupdate', function() {

        if (video.currentTime >= endTime) {
            this.pause;
        }
    }, false);

    video.load();
    video.play();
    try {
        video.currentTime = starttime;
        ctx.drawImage($this, 0, 0);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
    } catch (ex) {
    }
}

В приведенном выше коде у меня есть кнопка, которая активирует эту функцию.

...