Vidéo lecture iPhone en ligne(sans plein écran) avec démarrage automatique pour les vidéos web.
Upload and test your video now!
Voyez comment cela fonctionne, convertir votre vidéo gratuitement
Il y a beaucoup de raisons pour lesquelles les propriétaires de sites Web souhaitent être en mesure de jouer leurs vidéos en ligne(sans plein écran) sur des appareils portables comme les iPhones qui pourraient inclure la capacité des utilisateurs d'interagir encore avec la page tout en regardant la vidéo ou lorsqu'il est en pause; ainsi que, lorsque la vidéo passe en plein écran, les annonces environnantes ne sont plus efficaces qui n'est pas souhaitable. Un autre problème, que beaucoup voudraient surmonter, est que, contrairement à un ordinateur de bureau avec lecteur Flash vous ne pouvez pas démarrer automatiquement votre vidéo sur un tel dispositif.
Plus des exemples de la lecture en ligne de vidéo pour iPhone:
Code incorporé pour cet exemple (vous devez placer des fichiers sur votre serveur / cdn)
<html>
<head>
<script type="text/javascript" src="/jsv/jsvideo14.js"></script>
</head>
<body>
<video id="player" preload="auto" width="640" height="360" src="https://d1oa9tftava270.cloudfront.net/videos/iphone/samples/easy20bits-9717a-47aec-0067c-753ba.jsv" data-audio="https://d1oa9tftava270.cloudfront.net/videos/iphone/samples/easy20bits-9717a-47aec-0067c-753ba.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>
Les caractéristiques comprennent (peut ne pas être pris en charge par cette démo):
Événements et API compatibles avec vidéo HTML5 font vos vidéos travailler facilement avec les différents lecteur HTML5 sur le web, regarder cette vidéo:
- 360 video iPhone support
- Vidéos de toute durée
- Responsive - débit binaire adaptatif et dimensions flexibles
- Streaming - démarrer / chercher de / vers un point quelconque dans la vidéo sans téléchargement
- Servez vos annonces vidéo aux appareils iPhone et Android avec des tiers plugins VAST-VPAID
- HLS VOD en ligne(sans plein écran)
- Diffusion en flux sans plein écran avec latence mineur - solution de streaming en direct pour les applications où le retard est critique
- Diffusion en flux sans plein écran - jouer votre HLS en direct (HTTP live streaming), RTMP ou RTSP flux en ligne(sans plein écran) sur iPhone
- Traitement en vrac - API de encodage prêt
- Soutien transparence - lire la suite
- Personnalisation facile: mime élément html5 vidéo en fournissant la même interface pour une intégration facile dans votre lecteur vidéo personnalisé
- Possibilité de contrôler le tampon vidéo
Il existe cependant certaines limites
Notre approche vous donne le plein contrôle de la lecture vidéo, y compris la capacité de lecture automatique de vos vidéos sur un iPhone, cliquez sur le bouton ci-dessus pour rafraîchir cette page avec / sans démarrage automatique activé.
S'il vous plaît contactez nous si vous êtes intéressés à obtenir vos vidéos encodées ou la licence du codec vidéo.
Utilisation
Ajoutez le fichier décodeur
Inclure le fichier javascript pour la lecture de vidéos sur iPhone en ligne sur la page Web comme d'habitude, soit dans la tête ou au bas de la page.
Politique d'origines
Si votre vidéo est un fichier .jsv unique et est hébergé sur un domaine distinct, votre serveur a besoin pouvoir traiter les demandes OPTIONS prévol correctement et vous avez besoin d'envoyer les en-têtes suivants avec le fichier:
Acces-Control-Allow-Origin: http: // votredomaine
Access-Control-Allow-Headers: Range
Access-Control-Expose-Headers: Content-Range, Content-Length
Voici un exemple de politique CORS pour Amazon AWS S3 seau:
<?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>
Toutefois, si votre vidéo est au format HLS et est hébergé sur un domaine différent, vous avez besion seulement d'en-tête Access-Control-Allow-Origin comme ceci:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
</CORSRule>
</CORSConfiguration>
Initialisation:
Il y a quelques options globales que vous pouvez utiliser en créant jav_config variable globale avant d'inclure le fichier du joueur comme ceci:
window.jsv_config = {
bufferSec:5,
chunkSize:1000000,
doNotPatchCreateElement:true
};
Où
| Propriété | Description | Par défaut |
|---|---|---|
| unlockAudio | Par défaut sur les appareils mobiles l'API audio est automatiquement déverrouillé lors de la première intervention de l'utilisateur. Si ce n'est pas souhaité définir cette propriété à false et utilisez player.unlockaudio() méthode à la place en cas de besoin. | true |
| audioMap | Construire url audio de la vidéo URL (au lieu d'utiliser l'attribut de données audio), les arguments (tableau) pour passer à remplacer la fonction: audioUrl = String.prototype.replace.apply (URL vidéo, audioMap) | aucun |
| bufferSec | Taille de la mémoire tampon Max, secondes | 30 |
| bufferMinSec | Taille du tampon min pour commencer à jouer, secondes | 1 |
| chunkSize | Taille de chaque requête de vidéo (similaire à HLS chunk size), octets | 300000 |
| doNotPatchCreateElement | Par défaut la fonction createElement est patché pour produire des éléments jsv vidéo au lieu d'éléments vidéo normales, si vous devez également créer des vidéos normales définissez cette propriété sur true et utiliser fonction new video_jsv() | false |
| worker | Chemin d'accès au lecteur javascript pour utilisation comme un Web Worker | aucun |
| audioShiftSec | Audio tampon décalage par rapport à un tampon vidéo, Websockets live streaming uniquement, en secondes | 0 |
| skipHard | Si les images vidéo peuvent être sautées, Websockets live streaming uniquement, booléen | false |
Vous pouvez créer le lecteur soit en JavaScript comme vous le feriez normalement avec html5 vidéo:
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');
});
ou utilisez la marque familière:
<video preload="auto" width="360" height="180" src="/videos/iphone/video.jsv" data-audio="/videos/iphone/audio.mp3"></video>
avec une seule exception de l'attribut 'data-audio' qui est nouveau et indique le chemin du fichier audio.
| Nom | Type | Description | Obligatoire |
|---|---|---|---|
| src | Chaîne | L'URL du fichier jsv vidéo | Oui |
| data-audio | Chaîne | Url du fichier audio | Non |
| poster | Chaîne | L'image de support | Non |
| autoplay | Boolean | S'il vous plaît noter que vous ne pouvez démarrer automatiquement votre vidéo sur les mobiles (iPhone, iPad, Android) que s'il est mise en sourdine sinon une interaction de l'utilisateur (cliquez) est nécessaire. | Non, false par défaut |
| preload | auto|metadata|none | Indique si la vidéo doit être préchargé, seul le premier morceau chargé ou rien ne chargé. | Non, auto par défaut |
| style.width | Chaîne | Largeur du joueur en px (100px) ou en pourcentage de l'élément conteneur (100%) | Non, par défaut 100% |
| style.height | Chaîne | Hauteur du joueur en px (100px) ou en pourcentage de l'élément conteneur(100%) | Non, par défaut 100% |
Méthodes, propriétés et événements
Notre lecteur vidéo en ligne (sans plein écran) pour iPhone prend en charge l'API d'un élément html5 vidéo régulière de sorte que vous pouvez facilement les utiliser de façon interchangeable, voir la référence pour plus d'informations ici.
API d'encodage vidéo
Nous avons lancé notre API de codage de sorte que vous pouvez facilement intégrer le processus d'encodage dans votre application pour lire des vidéos en ligne(sans plein écran) sur iPhone. L'infrastructure est basée sur nuage qui permet d'accueillir des applications, même à volume élevé.
Version actuelle: 2.0
Voici un exemple de nos appels API pour la vidéo iPhone en ligne en utilisant PHP
Requête:
$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();
}
Gestion des 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
}
Représentation
Notre API utilise la représentation JSON des données et donc les réponses comprennent en-tête 'Content-Type: application/json'et vous devez l'inclure aussi lors des requêtes.
Authentification
Pour utiliser notre API vous auriez besoin de votre jeton api que vous pouvez trouver sur votre page de compte. Toute requête de votre application doit être envoyée sur une connexion sécurisée HTTPS et doit avoir un en-tête HTTP appelé 'Autorisation' avec votre jeton de api en tant que valeur.Méthodes
Il est actuellement qu'une seule méthode qui sert à créer un nouveau travail d'encodage.
Pour encoder une vidéo pour la lecture en ligne(sans plein écran) sur iPhone.
POST paramètres suivants à https://www.easy-bits.com/api/v1/video
| Nom | Type | Description | Obligatoire |
|---|---|---|---|
| type_flag | Chaîne | Que la vidéo est payé ou il sera filigrané | Non, soit free ou paid, par défaut paid |
| scheme | Chaîne | Protocole de la source | Oui, http ou ftp |
| url | Chaîne | L'URL de la vidéo à encoder | Oui, soi http://host/path soi ftp://log:password@host/path |
| rate | Entier:5|10|12|15|25|30 | Framerate de la vidéo, fps | No, 15fps par défaut |
| width | Entier | Largeur de la vidéo en pixels | Non, entre 10 et 2000, 320 par défaut |
| height | Entier | Hauteur de la vidéo en pixels | Non, entre 10 et 2000, 240 par défaut |
| bitrate | Entier | Bitrate de la vidéo en kbps | Non, entre 100 et 1000, 250 par défaut |
| notify_url | Chaîne | Une URL HTTP où notre système va POST une notification sur l'état de votre vidéo iPhone (s'il vous plaît voir ci-dessous pour le format) | No |
| versions | Tableau | Tableau d'objets qui ont des propriétés de largeur, la hauteur, le bitrate, le taux | Non, si une version unique est présente, max 5 versions |
Réponse
Si votre requête a réussi la réponse contiendra une seule propriété 'tag' qui est une référence unique que vous devez stocker dans votre application. Il est utilisé par exemple pour identifier une vidéo lorsque notre système vous envoie une notification.
Sinon, il contient la propriété «errors» qui est un tableau des erreurs.
Format d'une notification d'état de la vidéo
Si vous avez fourni 'notify_url' avec votre demande notre système affichera une mise à jour de statut à votre application dans le format suivant:
{'tag':'String','status':'String','url':'String','mp3':'String','wav':'String'}
Où:
| Nom | Type | Description |
|---|---|---|
| tag | Chaîne | Un identifiant unique de la vidéo dans notre système |
| status | Chaîne | 'Completed' ou 'Error' |
| url | Chaîne | Une URL HTTP que vous pouvez utiliser pour télécharger votre vidéo encodée |
| mp3 | Chaîne | Si votre vidéo contient de l'audio un lien vers un fichier mp3 sera fourni pour le téléchargement |
| wav | Chaîne | Si votre vidéo contient de l'audio un lien vers un fichier mp3 sera fourni pour le téléchargement |
| versions | Tableau | Tableau de tableaux qui ont indices url, mp3 et wav |
Limites
- Démarrage automatique ne fonctionne pas avec audio unmuted
- Niveau audio ne peut pas être changé en utilisant Javascript à l'exception de live streaming de latence mineur
- Vous avez besoin de mettre en place des en-têtes CORS qui pourrait ne pas être possible avec votre CDN (Amazon S3 l'a, par exemple) - ne vaut pas pour live streaming de latence mineur
- Il y a des limites sur quantité maximale de données à traiter par seconde - bitrate (voir tableau ci-dessous)
- Cherche ne peut pas être fait avec mp3 audio sur iOS <7, utilisez wav à la place
Bitrates maximales recommandées
| Modèle, navigateur | 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 |
Accueil