HTML5 player does not load video on iPad/iPhone on initial load when falling forward.

6 replies [Last post]

Wed, 11/30/2011 - 18:24

Joined: 10/13/2010

Points: 44

I have a page where I want it to fall forward to html5 if it supports it. I have the page working as far as if you click on a thumbnail (or tap in case of ipad/iphone) it will play in the player. With that said, my default video does not play/load when the page is first loaded on the ipad/iphone but they do on firefox/ie on pc?

I'm sure it has something to do when fall-forward javascript is running vs. the onready for the page but I can't seem to figure it out....

        <script type="text/javascript" src="js/jquery.js"></script>

        <script type="text/javascript" src="js/swfobject.js"></script>

        <script type="text/javascript" src="js/prettify.js"></script>

        <script type='text/javascript' src='http://html5.kaltura.org/js' ></script>
        <link type="text/css" rel="stylesheet" href="js/prettify.css" />

                <script type='text/javascript'>

                        mw.setConfig( 'Kaltura.ServiceUrl' , 'http://media.mysite.com' );

                        mw.setConfig( 'Kaltura.CdnUrl' , 'http://media.mysite.com' );

                        mw.setConfig('Kaltura.ServiceBase', '/api_v3/index.php?service=');

                        mw.setConfig('EmbedPlayer.EnableIframeApi', false );

                        mw.setConfig('EmbedPlayer.UseFlashOnAndroid', false );

                        mw.setConfig('Kaltura.LoadScriptForVideoTags', true );

                        mw.setConfig('Kaltura.AllowRemoteService', true );

                        mw.setConfig('Kaltura.UseAppleAdaptive', false );

                        mw.setConfig('EmbedPlayer.AttributionButton', false );

                        mw.setConfig( 'EmbedPlayer.NativeControlsMobileSafari', false );

                        mw.setConfig('EmbedPlayer.Attributes', {"autoplay":true} );                                             

                </script>  

               <script type="text/javascript">

                function doPage(entry) {

                        var flashvars = {};

                        flashvars.autoPlay = "true";

                        flashvars.entryId = entry;

                        flashvars.sourceType = "entryId";

                        flashvars.widgetId = "_100";

                        flashvars.partnerId = "100";

                        flashvars.host = "media.mysite.com";

                        flashvars.externalInterfaceDisabled = "false";

                        var params = {};

                        params.quality = "best";

                        params.wmode = "opaque";

                        params.allowfullscreen = "true";

                        params.allowscriptaccess = "always";

                        var attributes = {};

                        attributes.id = "thevideo";

                        attributes.name = "thevideo";

                        attributes.styleclass = "player";

                        swfobject.embedSWF("http://media.mysite.com/index.php/kwidget/cache_st/1322069743/wid/_100/uiconf_id/4421531/", "thevideo", "640", "386", "10.0.0", "js/expressInstall.swf", flashvars, params, attributes);            

                }

                $(document).ready(function() {

                  doPage('0_xc47ns0c');

                });             

        </script>

<!--- This works after the page is loaded --->

<img onclick="doPage('0_xc47ns0c')" src="http://media.mysite.com/p/0/thumbnail/entry_id/0_xc47ns0c/width/150/" />

Fri, 12/02/2011 - 05:16

Michael.Dale

Joined: 02/22/2009

Points: 76

Keep in mind the "autoPlay" attribute will not work for iOS devices. iOS requires a user click to start playback

Sun, 12/04/2011 - 20:28

pbwall

Joined: 10/13/2010

Points: 44

Thanks. I've solved this problem. STill having issue with iphone though. "The operation could not be completed".....when trying to play video...annoying

Fri, 12/23/2011 - 22:29

purealtar

Joined: 09/27/2011

Points: 9

I am having similar issues:

Running CE4.0 w/ html5 1.6.1 lib on an ubuntu LAMP
the site that is displaying the video and the video in question:
http://kitecartel.com/preview/coming-together

i tried using your code with my domain/video info and i get no video anywhere. i have access controls set to on and for this domain to be allowed.

i never get the falling forward action to work. If you could elaborate as to what your fix was that would be great. What versions of the platform/html5 library are you running?

Fri, 12/23/2011 - 22:54

Michael.Dale

Joined: 02/22/2009

Points: 76

the page in question is displaying video afaict ? ...

Be sure to include webm flavors for firefox.. if that is what browser you were testing with?

it may be helpful to setup another page that displays the issue.

Mon, 12/26/2011 - 22:49

purealtar

Joined: 09/27/2011

Points: 9

Ive set a sample page to here: http://kitecartel.com/sample-page.html?forceMobileHTML5

the page code looks like this:

<!DOCTYPE HTML>
<html>
<head>
<title>Fall forward html5</title>
<script type="text/javascript" src="http://html5.kaltura.org/js"></script>
<script type="text/javascript">

        // For testing safari in chrome / 

        if( document.URL.indexOf('forceMobileHTML5') != -1 ){           

                mw.setConfig( 'forceMobileHTML5' , true );

                mw.setConfig( 'Kaltura.ServiceUrl' , 'http://eventurescdn.com' );

                mw.setConfig( 'Kaltura.CdnUrl' , 'http://eventurescdn.com' );

                mw.setConfig('Kaltura.ServiceBase', '/api_v3/index.php?service=');

                mw.setConfig('EmbedPlayer.EnableIframeApi', false );

                mw.setConfig('EmbedPlayer.UseFlashOnAndroid', false );

                //mw.setConfig('Kaltura.LoadScriptForVideoTags', true );

                mw.setConfig('Kaltura.AllowRemoteService', false );

                mw.setConfig('Kaltura.UseAppleAdaptive', false );

                mw.setConfig('EmbedPlayer.AttributionButton', false );

                mw.setConfig( 'EmbedPlayer.NativeControlsMobileSafari', false );

                mw.setConfig('EmbedPlayer.Attributes', {"autoplay":true} );

        }                       

        mw.setConfig( 'EmbedPlayer.OverlayControls', false );           
</script>

</head>

<body>

<h2>Fall forward html5</h2>

<a href="?forceMobileHTML5"> Force Mobile Safari</a> for testing with desktop chrome and safari. <br />

<br />

<object id="kaltura_player" name="kaltura_player" type="application/x-shockwave-flash" 

  allowFullScreen="true" allowNetworking="all" allowScriptAccess="always" 

  height="267" width="480" 

  xmlns:dc="http://purl.org/dc/terms/" xmlns:media="http://search.yahoo.com/searchmonkey/media/" rel="media:video" resource="http://eventurescdn.com/index.php/kwidget/cache_st/1324422429/wid/_100/uiconf_id/4421494/entry_id/0_l5v9kcfk" data="http://eventurescdn.com/index.php/kwidget/cache_st/1324422429/wid/_100/uiconf_id/4421494/entry_id/0_l5v9kcfk">

  <param name="allowFullScreen" value="true" />

  <param name="allowNetworking" value="all" />

  <param name="allowScriptAccess" value="always" />

  <param name="bgcolor" value="#000000" />

  <param name="flashVars" value="" />

  <param name="movie" value="http://eventurescdn.com/index.php/kwidget/cache_st/1324422429/wid/_100/uiconf_id/4421494/entry_id/0_l5v9kcfk" />

</object>

</body>

</html>

i get an "unknown widget error" in the iPad and iPhone browsers. access control doesn't affect whether i get this error or not. This is the generated embed code minus the linked script resource from our admin / management console.

im attaching the images as a result: works fine in chrome, IE9 and Safari but not FF8 or the ipad or iphone
im also attaching an image of the encoded flavors for this video.

I have the mime types enabled/added in my apache config file.

Any insight is appreciated

Attachment	Size
chrome.jpg	51.55 KB
iPhone4.PNG	74.49 KB
ipad2.PNG	48.71 KB
flavors.jpg	215.63 KB

Wed, 12/28/2011 - 05:51

Michael.Dale

Joined: 02/22/2009

Points: 76

Thanks for the detailed report ;) ...

I notice you only set your configuration if you find the forceMobileHTML5 in the url. You need to set the remote configuration all the time. ( not just in forceMobileHTML5 mode ) .. since your iPad and iPhone will need that configuration to be able to load your widget from your server.