Comment insérer une vidéo en HTML et être compatible avec tous les navigateurs_HTML/Xhtml_Web production de pages-tutoriel HTML-php.cn

Comment insérer une vidéo en HTML et être compatible avec tous les navigateurs_HTML/Xhtml_Web production de pages

WBOY

Libérer： 2016-05-16 16:37:45

original

1402 Les gens l'ont consulté

Il existe deux méthodes les plus couramment utilisées pour insérer des vidéos dans HTML, l'une est l'ancienne balise et l'autre est la balise

Le premier a une compatibilité, mais il n'est pas très pratique à utiliser. Le second est très pratique à utiliser, mais la compatibilité est un casse-tête.

Bien qu'il y ait de nombreux problèmes avec la compatibilité de ce dernier, car il est très pratique à utiliser et conforme à la tendance de développement de la future conception de sites Web, nous utilisons ce dernier comme principale méthode d'insertion de vidéos. ses problèmes de compatibilité, le premier est utilisé comme auxiliaire.

Un exemple est le suivant :

Copiez le code

Le code est le suivant :

Actuellement, l'élément vidéo prend en charge trois formats vidéo :
Format IE Firefox Opera Chrome Safari
Ogg No 3.5 10.5 5.0 Non
MPEG 4 9.0 Non Non 5.0 3.0
WebM Non 4.0 10.6 6.0 Non

Ogg = Fichier Ogg avec encodage vidéo Theora et encodage audio Vorbis

MPEG4 = Fichier MPEG 4 avec encodage vidéo H.264 et Encodage audio AAC

WebM = fichier WebM avec encodage vidéo VP8 et encodage audio Vorbis

Remarque : Le format doit être conforme aux trois exigences détaillées ci-dessus, telles que MPEG 4, qui doit être H. 264 vidéo et audio AAC.

Dans ce cas, si le format vidéo est correct, nous sommes assez satisfaits des résultats de compatibilité de la plupart des navigateurs, mais IE678 ne le prend pas en charge, et leurs utilisateurs constituent toujours un très grand groupe en Chine. il faut penser à une autre solution pour les accompagner :

Copiez le code

Le code est le suivant :

Certains fichiers sont présentés ici, à l'exception de The la vidéo au format flv, ainsi que plusieurs fichiers swf ou js, sont tous générés avec le logiciel DW. Les amis qui ne souhaitent pas étudier la balise

peuvent simplement accéder au logiciel DW pour la générer. S'il peut être combiné intelligemment

Avec ces deux morceaux de code, vous pouvez obtenir le code final compatible avec tous les principaux navigateurs.

Nous pouvons donc faire ceci :

Utilisez jquery pour déterminer si le navigateur est IE (il n'est pas nécessaire de déterminer la version spécifique d'IE, car IE peut ne pas transmettre de versions supérieures pour des raisons de serveur , donc pour le moment, utilisez < pour toutes les balises IE ;object>), chargez différentes balises selon la version, le code est le suivant :

Copier le code Le code est le suivant :