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

Reload this page with autostart/autoplay

Upload and test your video now!

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):

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


			<html>
		<head>
			<script type="text/javascript" src="/jsv/jsvideo14.js"></script>
		</head>
		<body>
	<video id="player" preload="auto" width="640" height="266" src="https://d1oa9tftava270.cloudfront.net/videos/iphone/samples/tears_of_steel-454f8-62236-dfecf-da2c0.jsv" data-audio="https://d1oa9tftava270.cloudfront.net/videos/iphone/samples/tears_of_steel-454f8-62236-dfecf-da2c0.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:

360 video iPhone support
Any length videos
Responsive - adaptive bitrate and flexible dimensions
Streaming - start/seek from/to any point in the video without downloading
Serve your video ads to iPhone and Android devices with third party vast-vpaid plugins
Inline HLS VOD
Inline low latency live streaming - live streaming solution for applications where delay is critical
Inline live streaming - play your live HLS (HTTP live streaming), rtmp or rtsp streams inline on iPhone
Bulk processing - encoding API ready
Supports transparency - read more
Easy customization: mimics html5 video element by providing the same interface for easy integration into your custom player
Ability to control video buffer

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

Property	Description	Default
unlockAudio	By 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
audioMap	Construct 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
bufferSec	Max buffer size, seconds	30
bufferMinSec	Min buffer size to start playing, seconds	1
chunkSize	Size of each video request (similar to HLS), bytes	300000
doNotPatchCreateElement	By 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
worker	Path to the javascript player for Web Worker use	none
audioShiftSec	Audio buffer shift relatively to video buffer, websockets live streaming only, in seconds	0
skipHard	If video frames may be skipped, websockets live streaming only, boolean	false

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.

Name	Type	Description	Mandatory
src	String	The url to the jsv video file	Yes
data-audio	String	Url to the audio file	No
poster	String	The holding image	No
autoplay	Boolean	Please 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
preload	auto\|metadata\|none	Specifies weather the video should be preloaded, only the first chunk loaded or nothing.	No, default auto
style.width	String	Width of the player in px (100px) or in percentage of the container element (100%)	No, default 100%
style.height	String	Height 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

Name	Type	Description	Mandatory
type_flag	String	Whether the video is paid for or it will be watermarked	No, either free or paid, default paid
scheme	String	Protocol of the source	Yes, either http or ftp
url	String	The url of the video to encode	Yes, either http://host/path or ftp://log:password@host/path
rate	Integer:5\|10\|12\|15\|25\|30	Video framerate, fps	No, default 15fps
width	Integer	Width of the video in pixels	No, between 10 and 2000, default 320
height	Integer	Height of the video in pixels	No, between 10 and 2000, default 240
bitrate	Integer	Bitrate of the video in kbps	No, between 100 and 1000, default 250
notify_url	String	An HTTP url where our system is going to POST a notification about status of your iPhone video (please see below for the format)	No
versions	Array	Array of objects that have properties width, height, bitrate, rate	No, 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:

Name	Type	Description
tag	String	A unique identifier of the video in our system
status	String	'Completed' or 'Error'
url	String	An HTTP url which you can use to download your encoded video
mp3	String	If you video contains audio a link to an mp3 file will be provided for download
wav	String	If you video contains audio a link to a wav file will be provided for download
versions	Array	Array of arrays that have url, mp3 and wav indices

Limitations

Autoplay does not work with unmuted audio
Audio level can't be changed using Javascript with exception of live low latency streaming
You need to set up CORS headers which might not be feasible with your CDN (Amazon S3 has it, for example) - does not apply to live low latency streaming
There are limits on maximum amount of data to be processed per second - bitrate (see table below)
Seeking can't be done with mp3 audio on iOS < 7, use wav instead

Recommended maximum bitrates

Model, Browser	Max. bitrate, kbps
iPhone 6 Plus iOS 8, Safari	500
iPhone 6 iOS 8, Safari	500
iPhone 5S iOS 7, Safari	400
iPhone 5 iOS 6, Safari	350
iPhone 4S iOS 6, Safari	250
iPhone 4S iOS 5, Safari	200
iPhone, Chrome	90