youtube 동영상의 구간 반복을 구현해 보았습니다.

14702 단어 자바스크립트YouTube
youtube로 구간 반복이 하고 싶었습니다만, 기능에 없었기 때문에 자작해 보았습니다.

youtube에서 IFrame Player API이라는 것이 준비되어 있으므로 사용해보기로합니다

우선 브라우저에 동영상 표시
견본이 있기 때문에 가져옵니다

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>youtube</title>
    <script type="text/javascript" src="js/youtube.js" ></script>
</head>
<body>
    <div id="player"></div>
</body>
</html>

js/youtube.js
let tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";

let firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

let player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: '動画IDをいれる',
    events: {
      'onReady': onPlayerReady,
    }
  });
}

function onPlayerReady(event) {
  event.target.playVideo();
}

videoId :라는 곳에 재생하고 싶은 동영상의 id를 넣어 index.html
를 열면 동영상이 재생됩니다.
다음 이미지의 v = 이후 동영상 ID


재생하고 싶은 동영상을 바꿀 때 코드를 다시 쓰는 것이 귀찮아서 URL 파라미터로 동영상 ID를 얻을 수 있도록 할 때

js/youtube.js

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: url_param('youtube_id')', # 変更
    events: {
      'onReady': onPlayerReady,
    }
  });
}

# 追加 (URLパラメーターから値を取得)
function url_param(name) {
  let params =new URLSearchParams(window.location.search)
  return params.get(name);
}

여기에서 구간 반복 기능을 만듭니다.
HTML에 시작 ~ 종료 시간을 포함하는 항목을 만듭니다.

index.html
<body>
  <div id="player"></div>

  # 追加
  <input type='time' step='1' id='start_time' value='00:00:00' min='00:00:00'></input>
  <span>~</span>
  <input type='time' step='1' id='end_time' value='00:00:00'></input>
  <button id='loop'>ループ開始</button>
  <button id='loop_stop'>ループ停止</button>
</body>

js/youtube.js
window.onload = function(){
  const myEl = document.getElementById('loop');
  let loop;
  myEl.addEventListener('click', function() {
    loop = setInterval('loopPoint()', 1000);
    playVideo();
  }, false);

  const stopEl = document.getElementById('loop_stop');
  stopEl.addEventListener('click', function() {
    clearInterval(loop);
  }, false);
}

function loopPoint() {
  const endTime  = document.getElementById('end_time').value;
  const time = change_seconds_to_hours(endTime);
  if (time == 0){
      return
  } else if(time <= player.getCurrentTime()) {
    playVideo();
  }
}

function playVideo() {
    const startTime  = document.getElementById('start_time').value
    const time = change_seconds_to_hours(startTime);
    player.seekTo(time);
}

function change_seconds_to_hours(time) {
    const times = time.split(':');
    let second = 0;

    if(times[2] != undefined){
      second += Math.ceil(times[2]);
    }
    second += Math.ceil(times[1] * 60);
    second += Math.ceil(time[0] * 3600);
    return second
}

이것으로 구간 반복할 수 있었습니다.

아래에 이번 코드를 올릴 때입니다.
htps : // 기주 b. 코 m / 카즈 칸쥬 쿠 / 요츠 베 _ p y
Android Activity에서 YouTube 동영상을 전체 화면으로 표시
임베디드 Youtube에서 루프 재생시의 통신을 10분의 1로 했다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage