18041 sujets

Questions générales et questions de débutants

SOS, video qui ne fonctionne pas sous safari

Bonjour,
Inutile de vous le préciser mais je suis très très débutante en code... J'ai fait un site portfolio dans lequel j'ai inséré une animation AE en format mp4. En local tout allait bien , mais quand je l'ai mis en ligne avec OVH ma video ne se charge pas sous safari (mac), mais elle est lue sans problème avec Firerfox, Chrome et même Explorer !!
Voilà mon code

<div id="video">
<video src="fond2.mp4" width="1300" height="700" loop autoplay>
<source src="video.mp4">
<source src="video.webm">
<source src="video.ogv">
</video>

Si quelqu'un avait un idée du problème ?
Merci par avance
Salut,
et si tu rajoute controls="true"
à ta balise vidéo ? 

<video controls="true" src="fond2.mp4" width="1300" height="700" loop autoplay>

Modifié par JENCAL (02 Nov 2015 - 17:16)
Merci pour ta réponse.
Ca ne marche pas, en fait ça me met "erreur" dans la barre de contrôle, quand j'inspecte l'élément, j'ai l'impression que le chargement s'arrête à 30%... Safari veut ma peau...
Administrateur
Je ne vois pas pourquoi il y a un src sur la balise <video> qui est différent des <source>. Cela doit venir de là. En cas d'utilisation de sources multiples il faut retirer le src principal.
missharriett a écrit :
Merci !! Ca marche !! (bon sauf sur iphone, mais, ça sera pour une autre vie)

Peut-être un souci d'encodage de ton fichier mp4 ?
iOS reconnaît la balise video depuis la version 3.2, ça devrait donc fonctionner Smiley cligne
autoplay cause problème sur safari et opera :
http://www.w3schools.com/html/html5_video.asp

The autoplay attribute does not work in Safari and Opera, or in mobile devices like iPad and iPhone.

En ce cas on pourrait contourner le problème par javascript (voir la même page w3schools.com). Et avec l'exécution d'un script approprié après chargement de la page : obtenir une lecture en autoplay effective sur iPad et iPhone, sur safari et opera ...

A vérifier.
Modifié par pictural (05 Nov 2015 - 03:14)
Merci encore pour les réponses,
Je pense que l'encodage de la vidéo est correct (H264 et tout et tout).
L'autoplay ça semble à creuser, maintenant comme te dire... le JS, je le connait pas et il me connaît pas non plus.
Tant pis les possesseurs d'Iphone n'auront pas la joie immense de voir ma super animation...
Hello,

Effectivement, j'ai occulté la problématique de l'autoplay sur les terminaux mobile (iOS en tête) pour cet exemple particulier, et d'une manière générale sur l'ensemble des navigateurs.

Introduction à la balise video de HTML5
Le tutoriel a écrit :
L'attribut autoplay="true" comme son nom l'indique, permet de lancer la lecture automatiquement. Cela peut également être problématique avec une connexion à faible bande passante ou sur un terminal mobile. De manière générale, évitez d'imposer vos choix à l'utilisateur... et à sa connexion internet.

Laisser le choix à l'utilisateur !
Il écoute peut-être déjà de la musique, regarde peut-être une video, ne désire peut-être pas que ses voisins sache ce qu'il fait/regarde/écoute (au travail en open Space par exemple), bref, c'est intrusif Smiley cligne
Oui je suis d'accord avec toi, sauf que là c'est juste une petite animation discrète, c'est + un élément graphique, sur une photo sans son, et ça ferait bizarre de mettre un play... Je vais peut être faire un gif animé finalement !!
Bonsoir Miss,
je me suis amusé à rédiger un script pour un autoplay qui devrait satisfaire ton usage particulier. J'ai également considéré un semblable loop multi plate-forme. Dis-nous si cela fonctionne bien.

Voici le code html complet :
<!doctype html>

<html lang="fr">

<head>

<meta charset="utf-8" />

<title>autoplay et loop par javascript</title>

</head>

<body>

<!-- Les dimensions de la video ne sont-elles excessives pour un mobile ? -->
<video id="video1" width="1300" height="700">
<source src="video.mp4">
<source src="video.webm">
<source src="video.ogv">
</video>

<script> 
var myVideo = document.getElementById("video1"); 

	//si la propriété loop était supportée ...
if (typeof myVideo.loop == 'boolean')
{
myVideo.loop = true;
}
	//si loop n'était pas supporté ...
else
{
	//écouter l'événement de la video : terminée -> fonction :
myVideo.addEventListener('ended', function()
	{ 
	//mettre à zero = bug sur iOS 3.2
	//valeur < 0.1 cause un autre bug !
this.currentTime = 0.1;
	//lire à nouveau, donc en boucle
this.play();
	}, false);
}

	//autoplay
window.onload=function(){myVideo.play()}

/*quoi que conforme également, la solution alternative suivante d'autoplay est toutefois 'forcée' :
myVideo.play(); */
</script>

</body>

</html>
Perso, j'adore le bout de code minimaliste suivant : d'un clic sur la video on la lit puis on l'interrompt, puis on la lit et ainsi de suite ; un play/pause que je considère fort utile et plaisant :
<script> 
var myVideo = document.getElementById("video1");

function PlayPause()
{ 
if (myVideo.paused) myVideo.play(); 
else myVideo.pause(); 
}

myVideo.onclick=function(){PlayPause()}
</script>
En conclusion la balise <video> est vraiment bien née et configurable par javascript à souhait. Et nul n'oserait prétendre pratiquer décemment le web aujourd'hui sans javascript !
Modifié par pictural (10 Nov 2015 - 03:10)
Compilant les scripts précédants pour un seul script multi plate-forme (... iPad iPhone) + les navigateurs Chrome et FireFox pour PC/Mac et wide screens + Safari et Opera, bref pour un script universel, ceci semble être performant et suffisant :
<!-- sans afficher controls -->
<!-- play/pause d'un clic sur la video -->
<!-- les dimensions ici excessives pour Tablet et Phone devraient être soumises par script à la détection des dimensions de l'écran ; et pour le cas d'un petit écran l'on veillera à imposer une version allégée de la video, sous peine d'être (doublement) pénalisé par une faible bande passante -->
<video id="video1" width="1300" height="700">
<source src="video.mp4">
<source src="video.webm">
<source src="video.ogv">
</video>

<script>
	//envisager dans le html l'élément id="video1" pour variable :
var myVideo = document.getElementById("video1");

	//appliquer d'un clic un play/pause sur la video :
myVideo.onclick=function()
{
if (myVideo.paused) myVideo.play(); 
else myVideo.pause(); 
}

	//loop universel :
myVideo.addEventListener('ended', function()
{ 
this.currentTime = 0.1;
this.play();
});

	//autoplay universel :
window.onload=function(){myVideo.play()} 
</script>
A vous de vérifier, évidemment ... et de retourner d'éventuelles corrections !
Modifié par pictural (11 Nov 2015 - 01:37)
Bonjour à tous,
Bon j'ai testé vos scripts et ça fonctionne toujours pas sous mon iphone4... Je vais peut être essayer un exorcisme...
En tout cas merci à tous pour la chouette entraide trouver ici !
Sujet clos
Aller à