I have been developing a video player to play YouTube videos using the YouTube JavaScript Player API. I am required to use the HTML5 mode of the player because the video must have variable speed playback ability. I have been using the html5=1 parameter to request for HTML5 mode of the player. Until recently it was working fine in latest Google Chrome and Firefox browsers.
For the past week, however, in Firefox the video started loading the Flash mode of the player. I have tried debugging, and found out that if I turn on the HTML5 player by requesting it from YouTube directly, then in Firefox the video starts playing in HTML5 mode. The parameter html5=1 has no effect in Firefox.
In Google Chrome this is not so. No matter what is set on the YouTube HTML5 settings page, the html5=1 parameter still has effect. If it is set to 1, then HTML5 mode is used. If it is set to 0, then Flash mode is used.
I have made a bare-bones test on JSFiddle.
// after the API code downloads.
window.onYouTubeIframeAPIReady = function () {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
playerVars: {
start: 60,
end: 90,
// Force the HTML5 mode.
html5: 1,
wmode: 'transparent',
rel: 0,
showinfo: 0,
enablejsapi: 1,
modestbranding: 1
},
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
}
Try loading that page in Google Chrome. When you right click on the YouTube video, you will get a HTML5 menu. Now change the code from html5: 1 to html5: 0, and click Run on the top of the page. The page will reload, and if you right click on the YouTube video, you should get the Flash menu.
Please correct me if I am wrong. Can somebody point me to the reason as to why this might be happening?