Iphone in-line playback and autostart/autoplay for web videos.
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):
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/jsvideo14.js"></script>
</head>
<body>
<video id="player" preload="auto" width="480" height="204" src="https://d1oa9tftava270.cloudfront.net/videos/iphone/samples/sintel.2010.720p-56a43-2e8a0-97af2-c5dde.jsv" data-audio="https://d1oa9tftava270.cloudfront.net/videos/iphone/samples/sintel.2010.720p-56a43-2e8a0-97af2-c5dde.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 |
Home