If you don't find an answer, please click here to post your question.
Reply
Trusted Contributor
Posts: 136
Registered: ‎10-09-2012

How-to: Async player loading

We've been working on some techniques to allow for the player to load asynchronously.  Here's one that we're trying out now.  I thought this might be of interest....

 

This example requires JQuery.

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Ooyala video playist test</title>
</head>
<body>
<div id="ooyalaplayer1" style="width:800px"></div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script>
	var embedCode = "Joa2NhdzqR_ubl8VLsoy4GmedrQoVgCw";
	var playerCSSURL = "player.css";
	var autoPlay = false;
	var initialTime = 0;
	var playerLoop = false;
	var useFirstVideoPlayList = false;

	$(document).ready(function(e) {
		$.ajax({
			url: 'http://player.ooyala.com/v3/ZWY2ZDc5MWM0YWQ1MTY5MzY4MGIwZWEx?platform=html5-priority&namespace=Player1',
			dataType: 'script',
			cache: true, // otherwise will get fresh copy every page load
			success: function() {
				Player1.ready(function() { 
					var playerConfiguration = {
						playlistsPlugin: {"data":[""]},
						width: "100%",
						height: "100%",
						wmode: 'transparent',
						autoplay: autoPlay,
						enableChannels: true,
						initialTime: initialTime,
						locale: "en-us",
						loop: playerLoop,
						prebuffering: false,
						useFirstVideoPlaylist: useFirstVideoPlayList,
						css: playerCSSURL,
						onCreate: function( player )
						{
							player.mb.subscribe( Player1.EVENTS.SIZE_CHANGED, "page", function( eventName ){ 
								resizeVideo( player ); 
							});
							// force a resize
							player.mb.publish( Player1.EVENTS.SIZE_CHANGED );
							player.mb.subscribe( Player1.EVENTS.EMBED_CODE_CHANGED, "page", function ( eventName, embedCode, playerConfigurationObject ) {
								if( typeof( playerConfigurationObject ) === "undefined" )
								{
									player.play();
								}
							});
						}
					}
					Player1.Player.create( 'ooyalaplayer1', embedCode, playerConfiguration );
				});	
			}
		});
		
	});
	
	// resize video
	function resizeVideo( obj ) 
	{
		var div = $( "#" + obj.elementId );
		var _oWidth = $( div ).width();
		var _hasPlaylist = ( div ).find( ".oo-playlists-thumbnails" );
		if( _hasPlaylist.length > 0 )
		{
			var _newHeight = ( _oWidth * 9 / 16 ) + 83;
		}
		else
		{
			var _newHeight = _oWidth * 9 / 16;
		}
		$( div ).height( _newHeight );
	}
	</script> 
</body>
</html> 

 

Posts: 1,387
Topics: 179
Kudos: 108
Blog Posts: 78
Ideas: 3
Solutions: 39
Registered: ‎08-20-2012

Re: How-to: Async player loading

[ Edited ]

Hi John,

 

Thanks for sharing! I bumped this to the "featured" section of the community.

 

Regards,

Thomas

Please show your appreciation to others. If someone helps you, don't forget to give them Kudos by clicking the star button next to their post. If a post answers your question, please mark it as an "Accepted Solution."




Check out our latest Ooyala Engineering Blog!
Highlighted
Advisor
Posts: 17
Registered: ‎08-10-2018

Re: How-to: Async player loading

Hello, I installed the plugin. I connected it to backlot but when I proceed to embed ooyala nothing comes up when I search for it. Any other way I can embed the ooyala video I want or am I doing something wrong ? Thank You