YouTube埋め込みで、JavaScriptで動画再生を操作

YouTubeの埋め込みで、再生ボタンと一時停止ボタンをJavaScriptを使用し、別でつけたいです。

現在のコード

HTML
1<div class="movieWrap">
2  <div id="player"></div>
3</div>
4<div class="buttons">
5  <button id="pauseMovie" type="button" class="button -pause">停止</button>
6  <button id="playMovie" type="button" class="button -play">再生</button>
7</div>

JavaScript
1const tag = document.createElement('script')
2tag.src = "https://www.youtube.com/iframe_api"
3const firstScriptTag = document.getElementsByTagName('script')[0]
4firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
5let player
6function onYouTubeIframeAPIReady() {
7  player = new YT.Player('player', {
8    videoId: 'R57QxyjBGWA',
9  })
10}
11
12// 動画の操作
13const stopButton = document.getElementById('stopMovie')
14const pauseButton = document.getElementById('pauseMovie')
15const playButton = document.getElementById('playMovie')
16
17stopButton.addEventListener('click', ()=&gt; {
18  player.stopVideo()
19})
20
21pauseButton.addEventListener('click', ()=&gt; {
22  player.pauseVideo()
23})
24
25playButton.addEventListener('click', ()=&gt; {
26  player.playVideo()
27})

試したこと
自分では知識がなさ過ぎてありません。

その他
YouTubeの動画は、おすすめに出てきたニュースを使わせていただきました。

行動規範の内容に同意します

回答2件

恐らくですが[ ()=> ]はどこかのサイトからコピーしてきてそのまま貼り付けたのではないですか？
正しくは[ () => ]です。

以下でとりあえず動くかと。
尚、別の方が指摘しているように[stopMovie]は存在しないのでコメントアウトしています。

JavaScript
1const tag = document.createElement('script');
2tag.src = "https://www.youtube.com/iframe_api";
3const firstScriptTag = document.getElementsByTagName('script')[0];
4firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
5let player;
6function onYouTubeIframeAPIReady() {
7  player = new YT.Player('player', {
8    videoId: 'R57QxyjBGWA',
9  });
10}
11
12// 動画の操作
13// const stopButton = document.getElementById('stopMovie')
14const pauseButton = document.getElementById('pauseMovie');
15const playButton = document.getElementById('playMovie');
16
17// stopButton.addEventListener('click', () => {
18//   player.stopVideo()
19// });
20
21pauseButton.addEventListener('click', () =>  {
22  player.pauseVideo()
23});
24
25playButton.addEventListener('click', () => {
26  player.playVideo()
27});

投稿2022/02/27 05:22

編集2022/02/27 05:24

PlugOut777

総合スコア917

ROGPURS

2022/02/27 05:43

回答ありがとうございます。ご指摘いただいた内容を変更しても再生されません。

PlugOut777

2022/02/27 05:48

HTMLの中でJavaScriptを指定している場所を提示していただいても良いですか？

行動規範の内容に同意します

stopMovieというIdの要素がないのでエラーになっています。
以下のコードを消してみてはどうでしょうか。

JavaScript
1const stopButton = document.getElementById('stopMovie')
2stopButton.addEventListener('click', () => {
3  player.stopVideo()
4})

追記
JavaScriptを書く場所とかが悪いのかもしれません。
以下のコードで動作確認しました。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div class="movieWrap">
            <div id="player"></div>
        </div>
        <div class="buttons">
            <button id="pauseMovie" type="button" class="button -pause">停止</button>
            <button id="playMovie" type="button" class="button -play">再生</button>
        </div>

        <script>
            const tag = document.createElement('script')
            tag.src = "https://www.youtube.com/iframe_api"
            const firstScriptTag = document.getElementsByTagName('script')[0]
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
            let player
            function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                videoId: 'R57QxyjBGWA',
            })
            }
    
            // 動画の操作
            const pauseButton = document.getElementById('pauseMovie')
            const playButton = document.getElementById('playMovie')
    
            pauseButton.addEventListener('click', () => {
            player.pauseVideo()
            })
    
            playButton.addEventListener('click', () => {
            player.playVideo()
            })
        </script>
    </body>
</html>

投稿2022/02/26 13:25

編集2022/02/27 06:38