javascript - YoutubeAPI video sometimes doesn't load in IE 11 -
i made website loads videos id database. using youtubeapi embed player in ie player doesn't load. here script.
<script> var player; var player_width = $(window).width() - 100; var player_height = $(window).height() - 50; $('.prev-next').height(player_height); $('.prev-next-but').height(player_height); function onyoutubeplayerapiready() { player = new yt.player('player', { width: player_width, height: player_height, videoid: '<?php echo $yt_id; ?>', events: { 'onready': onplayerready, 'onstatechange': onplayerstatechange } }); } function onplayerready(event) { event.target.playvideo(); } function onplayerstatechange(event) { if(event.data === 0) { document.forms["not_skipped"].submit(); } } i don't have problem, when using simple iframe, don't know how trigger event way when video finishes.
first of all, check on method you're using load player api library. if you're using script tag, chances script loads before onyoutubeplayerapiready function ever defined, , nothing gets triggered. avoid such race condition, want load library this:
<script> var tag = document.createelement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstscripttag = document.getelementsbytagname('script')[0]; firstscripttag.parentnode.insertbefore(tag, firstscripttag); var player; var player_width = $(window).width() - 100; var player_height = $(window).height() - 50; $('.prev-next').height(player_height); $('.prev-next-but').height(player_height); function onyoutubeplayerapiready() { player = new yt.player('player', { width: player_width, height: player_height, videoid: '<?php echo $yt_id; ?>', events: { 'onready': onplayerready, 'onstatechange': onplayerstatechange } }); } function onplayerready(event) { event.target.playvideo(); } function onplayerstatechange(event) { if(event.data === 0) { document.forms["not_skipped"].submit(); } } </script> now, thing you've mentioned -- it's simple hook player api existing iframe; need pass id of iframe yt.player constructor, , don't give width, height, or video id, this:
<iframe id="myplayer" width="560" height="315" src="//www.youtube.com/embed/0kl3vny0uai?enablejsapi=1" frameborder="0" allowfullscreen></iframe> <script> var tag = document.createelement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstscripttag = document.getelementsbytagname('script')[0]; firstscripttag.parentnode.insertbefore(tag, firstscripttag); var player; function onyoutubeplayerapiready() { player = new yt.player('myplayer', { events: { 'onready': onplayerready, 'onstatechange': onplayerstatechange } }); } function onplayerready(event) { event.target.playvideo(); } function onplayerstatechange(event) { if(event.data === 0) { document.forms["not_skipped"].submit(); } } </script> note we're still loading player library dynamically, avoid race condition.
Comments
Post a Comment