YouTube JavaScript API - play not fired when player hidden -
i'm controlling youtube iframe player via yt api. works fine on normal cases, in process, there state when player must display:none; after show player again display:block; works fine except doesn't fire usual events.
test case:
- start video normal play button on player - play start event fired
- stop video the button below, make .stopvideo(); , hide parent element of youtube iframe.
- click on show button, set display:block; again
- start video again play control, there won't event youtube player anymore.
do know way solve problem? (do not hide video's parent element not option :( )
<div> <div id="test" style="width: 300px; height: 200px;"></div> </div> <button id="stop">stop</button> <button id="show">show</button> <br /> <textarea id="console" style="height: 500px;"></textarea>
js:
var vars = { enablejsapi: 1, origin: window.location.protocol + "//" + window.location.host, autoplay: 0, theme: 'dark', modestbranding: 1, wmode: "opaque", rel: 0, vq: 'default' }; var c = $('#console'); var tag = document.createelement("script"); tag.src = "//www.youtube.com/iframe_api"; var firstscripttag = document.getelementsbytagname("script")[0]; firstscripttag.parentnode.insertbefore(tag, firstscripttag); window.onyoutubeiframeapiready = function () { var player = $("#test"), playercontainer = player.parent(); playerobj = new yt.player(player.attr("id"), { videoid: '0_afsnb8e5y', wmode: 'opaque', playervars: vars, events: { onstatechange: function (state) { switch (state.data) { case yt.playerstate.playing: c.val("play started\n" + c.val()); break; //case yt.playerstate.paused: case yt.playerstate.ended: c.val("play ended\n" + c.val()); break; } } } }); $('#stop').click(function () { playerobj.stopvideo(); playercontainer.css('display', 'none'); }); $('#show').click(function () { playercontainer.css('display', 'block'); playerobj.addeventlistener('onstatechange', 'test'); }); }
Comments
Post a Comment