ios - VideoJS 4.0 Acts strangely on iPad -


i upgrading app new videojs version 4.0, not working ipad (works on other browsers far can tell).

the 4.0 skin doesn't appear, , api appears not work @ all. video being used background , controlled buttons in app. however, after upgrade, video causes of buttons become un-clickable (or un-touchable if will).

here's js i'm working with.

var $curtime = 0; var $setpause = "go"; var $timeouttime = 1000;  $( '#main' ).on( 'pageshow',function(event){ videojs("humanbody", {"preload":"metadata","poster":"http://pidcgr.com/lobby/humanbody/vid/poster.png","controls":true}, function(){     console.log("initialized"); });  var myplayer = videojs("humanbody"); myplayer.ready(function(){     myplayer.src([       { type: "video/mp4", src: "http://pidcgr.com/lobby/humanbody/vid/bodyapp.mp4" },       { type: "video/ogg", src: "http://pidcgr.com/lobby/humanbody/vid/bodyapp.ogv" }     ]);     settimeout(function() {         if($setpause=="paused") {             myplayer.pause();         }         else {             myplayer.play();         }         myplayer.on('loadedmetadata', function() {             myplayer.currenttime($curtime.tofixed(1));         });     }, $timeouttime);     $(".video-nav").click(function() {         myplayer.pause();         $curtime = myplayer.currenttime();         $setpause = "paused";     });     $("a.start-over").click(function() {         myplayer.pause();         $curtime = 0;         $setpause = "go";     });     myplayer.on('pause', function() {         myplayer.posterimage.show();     });     myplayer.on('ended', function() {         myplayer.currenttime(myplayer.duration()-1+0.99);         myplayer.pause();         myplayer.posterimage.hide();     });     myplayer.on('error', function() {         console.log("error");     });     $timeouttime = 500; }); }); 

the video tag looks this:

<video id="humanbody" class="video-js vjs-default-skin" width="1024" height="748"></video> 

preview url here: http://pidcgr.com/lobby/humanbody/

there seems new (not yet documented?) option can set, disable default controls on ipad , android devices , display videojs skin: customcontrolsonmobile

so setup videojs with:

$( '#main' ).on( 'pageshow',function(event){ videojs("humanbody", {"preload":"metadata","poster":"http://pidcgr.com/lobby/humanbody/vid/poster.png","controls":true, "customcontrolsonmobile": true}, function(){ }); 

greetings, philip


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -