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

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/jsvideo85.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>
		

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:

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
	};
	

PropriétéDescriptionPar défaut
unlockAudioPar 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
audioMapConstruire 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
bufferSecTaille de la mémoire tampon Max, secondes30
bufferMinSecTaille du tampon min pour commencer à jouer, secondes1
chunkSizeTaille de chaque requête de vidéo (similaire à HLS chunk size), octets300000
doNotPatchCreateElementPar 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
workerChemin d'accès au lecteur javascript pour utilisation comme un Web Workeraucun
audioShiftSecAudio tampon décalage par rapport à un tampon vidéo, Websockets live streaming uniquement, en secondes0
skipHardSi les images vidéo peuvent être sautées, Websockets live streaming uniquement, booléenfalse

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.

NomTypeDescriptionObligatoire
srcChaîneL'URL du fichier jsv vidéoOui
data-audioChaîneUrl du fichier audioNon
posterChaîneL'image de supportNon
autoplayBooleanS'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
preloadauto|metadata|noneIndique si la vidéo doit être préchargé, seul le premier morceau chargé ou rien ne chargé.Non, auto par défaut
style.widthChaîneLargeur du joueur en px (100px) ou en pourcentage de l'élément conteneur (100%)Non, par défaut 100%
style.heightChaîneHauteur 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

NomTypeDescriptionObligatoire
type_flagChaîneQue la vidéo est payé ou il sera filigranéNon, soit free ou paid, par défaut paid
schemeChaîneProtocole de la sourceOui, http ou ftp
urlChaîneL'URL de la vidéo à encoderOui, soi http://host/path soi ftp://log:password@host/path
rateEntier:5|10|12|15|25|30Framerate de la vidéo, fpsNo, 15fps par défaut
widthEntierLargeur de la vidéo en pixelsNon, entre 10 et 2000, 320 par défaut
heightEntierHauteur de la vidéo en pixelsNon, entre 10 et 2000, 240 par défaut
bitrateEntierBitrate de la vidéo en kbpsNon, entre 100 et 1000, 250 par défaut
notify_urlChaîneUne 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
versionsTableauTableau d'objets qui ont des propriétés de largeur, la hauteur, le bitrate, le tauxNon, 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ù:

NomTypeDescription
tagChaîneUn identifiant unique de la vidéo dans notre système
statusChaîne'Completed' ou 'Error'
urlChaîneUne URL HTTP que vous pouvez utiliser pour télécharger votre vidéo encodée
mp3ChaîneSi votre vidéo contient de l'audio un lien vers un fichier mp3 sera fourni pour le téléchargement
wavChaîneSi votre vidéo contient de l'audio un lien vers un fichier mp3 sera fourni pour le téléchargement
versionsTableauTableau de tableaux qui ont indices url, mp3 et wav

Limites

Bitrates maximales recommandées

Modèle, navigateurMax. 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..

S'il vous plaît, attendez...