Bagaimana cara mendeteksi ketika video youtube selesai diputar?

Saya bekerja di situs yang memiliki banyak video youtube yang disematkan, klien ingin menampilkan munculan setiap kali video berhenti diputar.

Saya melihat api youtube dan sepertinya ada cara untuk mendeteksi kapan video berakhir:

http://code.google.com/apis/youtube/js_api_reference.html

tetapi saya tidak dapat menyematkan video seperti yang mereka sebutkan di halaman itu karena semua video sudah ada di situs (ribuan telah ditambahkan secara manual dengan menempelkan kode semat).

Adakah cara untuk mendeteksi akhir dari video ini tanpa mengubah video yang ada (menggunakan javascript)?

— TK123
sumber

Satu-satunya hal yang dapat saya sarankan adalah mengubah entri sematan agar disertakan enablejsapi=1. Jika mereka berada dalam database, seharusnya cukup mudah untuk mengubah srcatributnya. Anda mungkin memerlukan beberapa regex jika mereka dimasukkan secara statis ke dalam file HTML.

— unduh

Jawaban:

175

Ini dapat dilakukan melalui API pemutar youtube:

http://jsfiddle.net/7Gznb/

Contoh kerja:

    <div id="player"></div>

    <script src="http://www.youtube.com/player_api"></script>

    <script>

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              width: '640',
              height: '390',
              videoId: '0Bmhjf0rKe8',
              events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                alert('done');
            }
        }

    </script>

— TK123
sumber

Bagaimana Anda mengintegrasikan ini dengan beberapa video di satu halaman?

— motoxer4533

@ motoxer4533 baik saya tidak harus berurusan dengan banyak video di halaman yang sama tetapi hanya satu per halaman. Tidak yakin apakah API memungkinkan beberapa pemain dibuat dan titik akhir individual mereka terdeteksi.

— TK123

seharusnya tidak sulit untuk mengatur untuk banyak pemain - cukup atur beberapa var player1, var player2, var player 3 dll kemudian jalankan kode pengaturan beberapa kali - dengan setiap var baru

— codeguy

Juga contoh lengkap melakukan sesuatu yang serupa menggunakan api iframe di sini developers.google.com/youtube/…

— JeremyWeir

Untuk keterbacaan, saya sarankan YT.PlayerState.ENDED saat memeriksa status.

— Bart Burg

-7

Yang mungkin ingin Anda lakukan adalah memasukkan skrip di semua halaman yang melakukan hal berikut ... 1. temukan youtube-iframe: telusuri menurut lebar dan tinggi menurut judul atau dengan mencari www.youtube.com di sumbernya. Anda dapat melakukannya dengan ... - mengulang melalui window.frames dengan for-in loop dan kemudian memfilter berdasarkan propertinya

menyuntikkan jscript ke dalam iframe halaman saat ini menambahkan fungsi onYoutubePlayerReady must-include-function http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx
Tambahkan pendengar acara, dll.

Semoga ini membantu

— yshouman
sumber

tidak yakin apakah ini mungkin karena aturan lintas domain

— Asher Garland