7

1つのページに複数のYouTube動画を埋め込んで、ページが開いたらすぐに再生を開始し、最初の動画が終了したら2番目の動画を開始する簡単な方法はありますか？

私はこのようなものがうまくいくことを望んでいました：

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1" type="application/x-shockwave-flash" width="425" height="350"></embed></object>
<br>
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2"></param><embed src="http://www.youtube.com/v/NlXTv5Ondgs&autoplay=2" type="application/x-shockwave-flash" width="425" height="350"></embed></object>

そして、それは最初のものには当てはまりますが、2番目には当てはまりません。APIに飛び込む必要があるかもしれないと想像します。誰か提案がありますか？

4

6 に答える 6

14

Youtube IFrame APIを使用すると、これを簡単に行うことができます。

ここで構成する必要があるのは、YouTubeIDの配列だけです。URLの/v/の後の部分からそれらを取得できます（必要に応じて、IDの代わりにURLをロードするようにJavaScriptを変更できます。私はこの方法の方が好きです。

<div id="player"></div>
<script src="//www.youtube.com/iframe_api"></script>

<script>
    /**
     * Put your video IDs in this array
     */
    var videoIDs = [
        'OdT9z-JjtJk',
        'NlXTv5Ondgs'
    ];

    var player, currentVideoId = 0;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '350',
            width: '425',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.loadVideoById(videoIDs[currentVideoId]);
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            currentVideoId++;
            if (currentVideoId < videoIDs.length) {
                player.loadVideoById(videoIDs[currentVideoId]);
            }
        }
    }
</script>
于 2013-03-09T03:00:20.197 に答える
5

これは、 YouTube IframePlayerAPIを使用した例です。

2つの別々の埋め込み（player1とplayer2）があります。プレーヤー1がロードされるとビデオが自動再生され、完了するとプレーヤー2が開始されます。

あなたがそれで遊んでみたいなら、これがjfiddleです。

そしてコード：

<div id="player1"></div>
<div id="player2"></div>
<script>
    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player1;
    var player2;

    function onYouTubeIframeAPIReady() {
        player1 = new YT.Player('player1', {
            height: '350',
            width: '425',
            videoId: 'OdT9z-JjtJk',
            events: {
                'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
            }
        });
        player2 = new YT.Player('player2', {
            height: '350',
            width: '425',
            videoId: 'NlXTv5Ondgs'
        });
    }

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

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            player2.playVideo();
        }
    }
</script>
于 2013-03-10T02:19:20.910 に答える
1

私はJavaScriptが苦手です。しかし、私は以前にいくつかの同様の質問があります。

あなたは参照することができます

最初のビデオが終了したと判断し、2番目のビデオを実行します。2つの機能を設定できます。

<div id="player1"></div>
<br>
<object width="425" height="350"><param name="movie" id="player2-param" value="http://www.youtube.com/v/OdT9z-JjtJk"></param><embed src="http://www.youtube.com/v/OdT9z-JjtJk" type="application/x-shockwave-flash" width="425" height="350" id="player2-embed"></embed></object>

それから

function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                $('#player2-param').attr('value','http://www.youtube.com/v/OdT9z-JjtJkautoplay=1');//jquery
                $('#player2-embed').attr('src','http://www.youtube.com/v/OdT9z-JjtJkautoplay=1');//jquery

            }
        }

これがあなたを助け、より良いコードを書くことができることを願っています、ありがとう。

于 2013-03-08T12:23:23.103 に答える
0

YouTube APIを使用して、自動再生をtrueにします。YouTubeでプレイリストを作成し、それにリンクを付けます。

于 2013-03-15T07:13:22.937 に答える
0

前のサンプルコードに基づいています。Basic Vanilla JavaScript YoutubePlayer-Withプレイリストを作成しました。チェックアウトYoutubeプレーヤー-プレイリスト付き

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Basic Vanilla  JavaScript Youtube Player- With playlist</title>
</head>
<body>
<div class="player" style="width: 480px;height:360px;max-width: 50%;margin: 0 auto;">
    <div id="youtube" style="width: 100%;height: 100%"></div>
    <div class="controls" style="text-align: center;margin: 0 auto;">
        <button style="padding: 10px;width: 100px;background-color: #167AC6;"
                onclick="YouTubePlayer.playPrevious()">Prev
        </button>
        <button style="padding: 10px;width: 100px;background-color: #167AC6;margin-left: 30px;"
                onclick="YouTubePlayer.playNext()">Next
        </button>
    </div>
</div>
<script src="//www.youtube.com/iframe_api"></script>
<script>
    var YouTubePlayer = {
        current: 0,
        player: null,
        /**
         * Tracks ids here...
         */
        videos: [
            'vQMnaDNw5FQ',
            'Dp6lbdoprZ0',
            'OulN7vTDq1I'
        ],
        currentlyPlaying:function(){
            console.info('Current Track id', YouTubePlayer.videos[YouTubePlayer.current]);
            return YouTubePlayer.videos[YouTubePlayer.current];
        },
        playNext: function () {
            YouTubePlayer.increaseTrack()
            if (YouTubePlayer.player) {
                YouTubePlayer.currentlyPlaying();
                YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
            } else {
                alert('Please Wait! Player is loading');
            }
        },
        playPrevious: function () {
            YouTubePlayer.decreaseTrack()
            if (YouTubePlayer.player) {
                YouTubePlayer.currentlyPlaying();
                YouTubePlayer.player.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
            } else {
                alert('Please Wait! Player is loading');
            }

        },
        increaseTrack: function () {
            YouTubePlayer.current = YouTubePlayer.current + 1;
            if (YouTubePlayer.current >= YouTubePlayer.videos.length) {
                YouTubePlayer.current = 0;
            }
        },
        decreaseTrack: function () {
            YouTubePlayer.current = Math.max(YouTubePlayer.current - 1, 0);
        },
        onReady: function (event) {
            event.target.loadVideoById(YouTubePlayer.videos[YouTubePlayer.current]);
        },
        onStateChange: function (event) {
            if (event.data == YT.PlayerState.ENDED) {
                YouTubePlayer.playNext();
            }
        }
    }
    function onYouTubeIframeAPIReady() {
        YouTubePlayer.player = new YT.Player('youtube', {
            height: '350',
            width: '425',
            events: {
                'onReady': YouTubePlayer.onReady,
                'onStateChange': YouTubePlayer.onStateChange
            }
        });
    }
</script>
</body>
</html>

于 2015-12-27T07:48:38.983 に答える
0

複雑にしないでください。iframeを使用するだけです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/nWHpU7H7Clc?playlist=b6KzNmLMW6o,qWE6g8puu98" frameborder="0" allow="autoplay; encrypted-media" style="width:900px;height:400px" autoplay="true"></iframe>
于 2019-04-24T10:35:57.363 に答える