Iphone in-line playback and autostart/autoplay for web videos.

Reload this page without autostart/autoplay

See how it works, convert your video for free

There are many reasons why web site owners wish to be able to play their online videos in-line on handheld devices like iPhones which might include the ability of the users to still interact with the page while watching the video or when it is paused; plus, when the video goes full screen, the surrounding advertisements are no longer effective which is not desirable. Another problem, that many would like to get around, is that unlike on a desktop with Flash player you cannot auto start your video on such a device.

The only way to circumvent this behaviour was to use an app, but we have a real solution for you. Got an iPhone ? Click the video below and it will play in-line (currently iPhone 4S+ models are supported):

More inline video playback for iPhone examples:

Embed code for this example (you need to put files on your server/cdn)

	<html>
		<head>
			<script type="text/javascript" src="/jsv/jsvideo70.js"></script>
		</head>
		<body>
	<video id="player" preload="auto" width="640" height="360" src="https://d1oa9tftava270.cloudfront.net/videos/iphone/samples/iphone-1b283-ec67e-18a42-6e8c3.jsv" data-audio="https://d1oa9tftava270.cloudfront.net/videos/iphone/samples/iphone-1b283-ec67e-18a42-6e8c3.mp3"></video>
		<a id="play" href="javascript:void(0);">Play</a>
		<script type="text/javascript">
			window.onload = function(){
				var player = document.getElementById("player");
				var play = document.getElementById("play");
				play.addEventListener("click",function(){
					player.play();
				});
			}
		</script>
		</body>
	</html>
		

Features include (might not be supported by this demo):

HTML5 video compartible events and API make our videos work easily with various HTML5 players on the web, watch this video in:

There are however certain limitations

Our approach gives you full control of the video playback including the ability to autoplay your videos on an iPhone, click the button above to refresh this page with/without autoplay(autostart) enabled.

Please contact us if you are interested in getting your videos encoded or licensing the video codec.

Usage

Add the decoder file

Include the javascript file for playing videos on iPhone inline on the webpage as usual either in the head or at the bottom of the page.

Same origin policy

If your video is a single .jsv file and is hosted on a separate domain your server needs to handle OPTIONS pre-flight requests correctly and you need to send the following headers along with the file:

Access-Control-Allow-Origin: http://yourdomain Access-Control-Allow-Headers: Range Access-Control-Expose-Headers: Content-Range, Content-Length

Here is an example for Amazon AWS S3 bucket CORS policy:

	<?xml version="1.0" encoding="UTF-8"?>
	<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
		<CORSRule>
			<AllowedOrigin>http://yourdomain</AllowedOrigin>
			<AllowedMethod>GET</AllowedMethod>
			<AllowedHeader>*</AllowedHeader>
			<ExposeHeader>Content-Range</ExposeHeader>
			<ExposeHeader>Content-Length</ExposeHeader>
		</CORSRule>
	</CORSConfiguration>
	

However if your video is in HLS format and is hosted on a different domain you only need Access-Control-Allow-Origin header like so:

	<?xml version="1.0" encoding="UTF-8"?>
	<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
		<CORSRule>
			<AllowedOrigin>*</AllowedOrigin>
		</CORSRule>
	</CORSConfiguration>
	

Initialization:

There are a few global options that you can use by creating global variable jsv_config before including the player's file like so:

	window.jsv_config = {
		bufferSec:5,
		chunkSize:1000000,
		doNotPatchCreateElement:true
	};
	

Where

PropertyDescriptionDefault
unlockAudioBy default on mobile devices the audio API is unlocked automatically on first user interaction. If this is not desired set this property to false and use player.unlockaudio() method instead when needed.true
audioMapConstruct audio url from video url (instead of using data-audio attribute), arguments (array) to pass to replace function: audioUrl = String.prototype.replace.apply(videoUrl, audioMap) none
bufferSecMax buffer size, seconds30
bufferMinSecMin buffer size to start playing, seconds1
chunkSizeSize of each video request (similar to HLS), bytes300000
doNotPatchCreateElementBy default createElement function is patched to produce jsv video elements instead of normal video elements, if you also need to create normal videos set this property to true and use new video_jsv()false
workerPath to the javascript player for Web Worker usenone
audioShiftSecAudio buffer shift relatively to video buffer, websockets live streaming only, in seconds0
skipHardIf video frames may be skipped, websockets live streaming only, booleanfalse

You can create the player either in JavaScript as you would normally do with html5 video:

	var player = new video_jsv();
	or
	var player = document.createElement('video');
	document.getElementById('container').appendChild(player);	
	player.setAttribute('preload', "auto");
	player.style.width = '360px';	
	player.style.height = '180px';	
	player.setAttribute('poster', '/videos/iphone/poster.png');	
	player.setAttribute('data-audio', '/videos/iphone/audio.mp3');
	player.setAttribute('src', '/videos/iphone/video.jsv');
	player.addEventListener('canplay', function (){
		alert('We are all ready to start playing');
	});
	

or you use the familiar mark up:

<video preload="auto" width="360" height="180" src="/videos/iphone/video.jsv" data-audio="/videos/iphone/audio.mp3"></video>
	

with one exception of 'data-audio' attribute which is new and indicates path to the audio file.

NameTypeDescriptionMandatory
srcStringThe url to the jsv video fileYes
data-audioStringUrl to the audio fileNo
posterStringThe holding imageNo
autoplayBooleanPlease note you can only autostart your video on mobiles(iPhone, iPad, Android)if it is muted otherwise a user interaction (click) is required.No, default false
preloadauto|metadata|noneSpecifies weather the video should be preloaded, only the first chunk loaded or nothing.No, default auto
style.widthStringWidth of the player in px (100px) or in percentage of the container element (100%)No, default 100%
style.heightStringHeight of the player in px (100px) or in percentage of the container element (100%)No, default 100%

Methods, properties and events

Our inline video for iPhone player supports the API of a regular html5 video element so you can easily use them interchangeably, see the reference for more information here.

Video encoding API

We launched our encoding API so that you can seamlessly integrate the encoding process in your application to play videos inline on iPhone. The infrastructure is cloud based which allows to accommodate even high volume applications.

Current version: 2.0

Here is an example of our API calls for iPhone inline video using PHP:

Request:

		$ch = curl_init(); 
		curl_setopt($ch, CURLOPT_URL, 'https://www.easy-bits.com/api/v1/video'); 
		curl_setopt($ch, CURLOPT_HTTPHEADER, array(
			'Authorization: api_token',
			'Content-Type: application/json',
		));
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
		curl_setopt($ch, CURLOPT_HEADER, 0);
		curl_setopt($ch, CURLOPT_POST, 1);
		
		/* single version */
		
		$data = array(
			'type_flag' => 'free',
			'scheme' => 'http',
			'url' => 'http://s.easy-bits.com/videos/iphone-inline-video-autostart.mp4',
			'width' => 320,
			'height' => 240,
			'bitrate' => 250,
			'notify_url' => 'https://www.easy-bits.com/notify',
		);
		
		/* single version */
		
		or
		
		/* multiple versions */
		
		$data = array(
			'type_flag' => 'free',
			'scheme' => 'http',
			'url' => 'http://s.easy-bits.com/videos/iphone-inline-video-autostart.mp4',
			'notify_url' => 'https://www.easy-bits.com/notify',
		);
		
		$version1 = new stdClass();
		$version1->width = 320;
		$version1->height = 240;
		$version1->bitrate = 250;
		
		$version2 = new stdClass();
		$version2->width = 640;
		$version2->height = 480;
		$version2->bitrate = 600;
		
		$data['versions'] = array($version1, $version2);
		
		/* multiple versions */
		
		curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
	
		$reponse = curl_exec($ch); 
		$reponse = json_decode($reponse);
		
		if(!empty($reponse->tag))
		{
			//store the tag
		}
		else
		{
			//handle error
			print_r( $reponse->errors );
			exit();
		}
	

Handling notifications

		$postdata = file_get_contents("php://input");
		$data = json_decode($postdata);
		
		if($data->status == 'Completed')
		{
			//identify video by $data->tag
			//download the video $data->url and optionally the audio $data->mp3/$data->wav
		}
		else
		{
			//there was an error
		}
	

Representation

Our API uses JSON representation of data and thus responses include 'Content-Type: application/json' header and you should include it when making requests.

Authentication

To use our API you would need your api token which you can find on your Account page. Every request from your application should be sent over a secure HTTPS connection and needs to have an HTTP header called 'Authorization' with your api token as value.

Methods

There is currently only one method which serves to create a new encoding job.

Encode a video for inline playback on iPhone

POST following parameters to https://www.easy-bits.com/api/v1/video

NameTypeDescriptionMandatory
type_flagStringWhether the video is paid for or it will be watermarkedNo, either free or paid, default paid
schemeStringProtocol of the sourceYes, either http or ftp
urlStringThe url of the video to encodeYes, either http://host/path or ftp://log:[email protected]/path
rateInteger:5|10|12|15|25|30Video framerate, fpsNo, default 15fps
widthIntegerWidth of the video in pixelsNo, between 10 and 2000, default 320
heightIntegerHeight of the video in pixelsNo, between 10 and 2000, default 240
bitrateIntegerBitrate of the video in kbpsNo, between 100 and 1000, default 250
notify_urlStringAn HTTP url where our system is going to POST a notification about status of your iPhone video (please see below for the format)No
versionsArrayArray of objects that have properties width, height, bitrate, rateNo, if a signle version is present, max 5 versions

Response

If you request was successful the response will contain a single property 'tag' which is a unique reference that you should store in your application. It is used for example to identify a video when our system sends you a notification later.

Otherwise it contains property 'errors' which is an array of errors.

Format of a video status notification

If you supplied 'notify_url' with your request our system will POST a status update to your application in the following format:

{'tag':'String','status':'String','url':'String','mp3':'String','wav':'String'}

Where:

NameTypeDescription
tagStringA unique identifier of the video in our system
statusString'Completed' or 'Error'
urlStringAn HTTP url which you can use to download your encoded video
mp3StringIf you video contains audio a link to an mp3 file will be provided for download
wavStringIf you video contains audio a link to a wav file will be provided for download
versionsArrayArray of arrays that have url, mp3 and wav indices

Limitations

Recommended maximum bitrates

Model, BrowserMax. bitrate, kbps
iPhone 6 Plus iOS 8, Safari500
iPhone 6 iOS 8, Safari500
iPhone 5S iOS 7, Safari400
iPhone 5 iOS 6, Safari350
iPhone 4S iOS 6, Safari250
iPhone 4S iOS 5, Safari200
iPhone, Chrome90
loading..

Please wait...