web-dev-qa-db-fra.com

Créez dynamiquement un élément vidéo HTML5 sans qu'il soit affiché dans la page

Est-il possible de créer dynamiquement un élément vidéo HTML5 afin que je puisse accéder à l'élément par des API comme document.getElementById Ou Nom, mais il peut ne pas apparaître dans la page Web.

Quelque chose comme div.hide() ou quelque chose dans ce sens?

javascriptajaxdomhtml5-video
15
Swaraj Chhatre

Tu peux essayer

var video = document.createElement('video');

video.src = 'urlToVideo.ogg';
video.autoplay = true;

vous pouvez également utiliser la méthode canPlayType pour vérifier si le navigateur prend en charge le format vidéo que vous souhaitez utiliser avant de définir la source

if (video.canPlayType('video/ogg').length > 0) {
    /* set some video source */
}

La méthode renvoie maybe ou perhaps selon le navigateur. Si la chaîne est vide, cela signifie qu'elle ne peut pas la lire.

Vous pouvez maintenant utiliser le video à l'aide de l'API. Il suffit de le stocker globalement. Vous pouvez ensuite l'insérer dans le DOM. J'espère que cela t'aides.

29
Mike-O

Bien sûr, vous pouvez tout créer en utilisant JS. Vous n'avez besoin de rien pour être pré-créé dans le corps html.

Voici un moyen simple de créer un élément vidéo dans JS:

var videlem = document.createElement("video");
/// ... some setup like poster image, size, position etc. goes here...
/// now, add sources:
var sourceMP4 = document.createElement("source"); 
sourceMP4.type = "video/mp4";
sourceMP4.src = "path-to-video-file.mp4";
videlem.appendChild(sourceMP4);
//// same approach add ogg/ogv and webm sources

Avant de faire cela, vous devez vérifier si le navigateur prend en charge l'élément vidéo et, dans l'affirmative, quels formats de fichier peuvent être lus. Pour cela, vous pouvez:

var supportsVideoElement = !!document.createElement('video').canPlayType;

Ensuite, si l'élément vidéo est pris en charge, testez les formats vidéo pouvant être lus:

var temp = document.createElement('video');
var canPlay_MP4 = temp.canPlayType('video/mp4; codecs="avc1.42E01E,mp4a.40.2"');
var canPlay_OGV = temp.canPlayType('video/ogg; codecs="theora,vorbis"');
var canPlay_WEMB = temp.canPlayType('video/webm; codecs="vp8,vorbis"');

Après cela, vous pouvez ajouter un élément vidéo à votre page en utilisant JS uniquement, avec des sources vidéo appropriées définies. Il peut y avoir un problème avec .htaccess côté serveur où vous devez ajouter des lignes:

AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

Cela peut ne pas être nécessaire, selon la façon dont votre serveur est configuré, mais si vous rencontrez des problèmes avec la lecture de vidéos à partir de votre serveur, mais ils fonctionnent bien par exemple. localhost sur votre machine de développement, cela peut résoudre le problème. .htaccess avec les lignes ci-dessus doit être placé dans le dossier où se trouvent les fichiers vidéo, côté serveur.

Ok maintenant, afin d'avoir cet élément disponible avec getElementById (...), il vous suffit de définir son id, lorsque vous le créez:

var videlem = document.createElement("video");
videlem.id = "xxxxxx";

Et maintenant, vous pouvez le retrouver plus tard en utilisant:

var videlem = document.getElementById("xxxxxx");

Cependant, comme quelqu'un l'a déjà commenté, vous n'avez pas besoin de le faire si vous avez déjà créé l'élément et que la variable le pointe ... utilisez-le directement.

J'espère que cela t'aides :-)

21
Sinisa

Mise à jour (et plus simple) pour y parvenir (puisque les recherches Google mènent ici):

var x = document.createElement("VIDEO");

if (x.canPlayType("video/mp4")) {
    x.setAttribute("src","movie.mp4");
} else {
    x.setAttribute("src","movie.ogg");
}

x.setAttribute("width", "320");
x.setAttribute("height", "240");
x.setAttribute("controls", "controls");
document.body.appendChild(x);
4
Sam