Vidéo lecture iPhone en ligne(sans plein écran) avec démarrage automatique pour les vidéos web.

Recharger cette page avec sans démarrage automatique

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/jeep-04d93-bebc5-334bf-9148d.jsv" data-audio="https://d1oa9tftava270.cloudfront.net/videos/iphone/samples/jeep-04d93-bebc5-334bf-9148d.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