communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > Explication détaillée d'exemples d'intégration de vidéo dans des pages HTML et de changement de vidéo sous contrôle JS

Explication détaillée d'exemples d'intégration de vidéo dans des pages HTML et de changement de vidéo sous contrôle JS

高洛峰
Libérer： 2017-03-06 16:57:59
original
2319 Les gens l'ont consulté

Cet article présente en détail comment intégrer des vidéos dans des pages HTML et comment utiliser JS pour contrôler le changement de vidéo. Les détails sont les suivants. Vous pouvez vous y référer ci-dessous. Tout d'abord, le code HTML pour intégrer une vidéo dans la page est :

Le code est le suivant :

<p id="youku" class="youku"> 
<object id="obx" name="obx" width="290" height="260"> 
<param name="movie" value="http://www.tudou.com/v/6HJvxxkarzk/&resourceId=0_04_11_19/v.swf"></param> 
<param name="allowFullScreen" value="true"></param> 
<param name="allowscriptaccess" value="always"></param> 
<param name="wmode" value="opaque"></param> 
<embed src="http://www.tudou.com/v/6HJvxxkarzk/&resourceId=0_04_11_19/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="290" height="260"></embed> 
</object> 
</p>
Copier après la connexion


Parmi eux, les balises object et embed sont utilisé en même temps pour être compatible avec davantage de navigateurs, mais veillez à conserver les mêmes valeurs d'attribut cohérentes sous les deux balises.
PS : Pour une introduction et l'utilisation des balises et et de leurs attributs, veuillez vous référer à l'article Balises OBJECT et EMBED.

Ensuite, parlons de la façon d'utiliser JS pour modifier dynamiquement l'adresse de la vidéo intégrée afin de lire la vidéo suivante.
À l'heure actuelle, de nombreuses personnes peuvent immédiatement penser à utiliser des noms de balises ou des méthodes DOM pour trouver l'attribut value du nœud param et l'attribut src du nœud embed, et utiliser l'affectation dynamique JS pour modifier l'adresse. Cependant, le test a révélé que même si l'adresse de la vidéo avait été remplacée, la vidéo affichée sur la page restait inchangée, ce qui était déroutant.

Il s'avère que tous les paramètres de l'objet intégré sont initialisés lorsque la page est chargée. Ce n'est qu'en la rechargeant que le passage à la vidéo suivante peut être lu. La simple modification de la valeur de son attribut d'adresse n'est pas abordable. . Tout comme un employé de l'entreprise, son adresse a changé (déménagement), il est toujours l'employé d'origine et non quelqu'un d'autre.
Il existe deux méthodes que j'utilise souvent pour le recharger (prenons le code ci-dessus comme exemple) :
① Utilisez la méthode obj.innerHTML de JS pour réinitialiser l'intégralité de l'objet objet.

Le code est le suivant :

/*功能：动态切换视频*/ 
function setvideo(url){ 
var youku = document.getElementById("youku"); 
var htmlstr = "<object id=&#39;obx&#39; name=&#39;obx&#39; width=&#39;290&#39; height=&#39;260&#39;>"; 
htmlstr += "<param name=&#39;movie&#39; value=&#39;"+url+"&#39;></param>"; 
htmlstr += "<param name=&#39;allowFullScreen&#39; value=&#39;true&#39;></param>"; 
htmlstr += "<param name=&#39;allowscriptaccess&#39; value=&#39;always&#39;></param>"; 
htmlstr += "<param name=&#39;wmode&#39; value=&#39;opaque&#39;></param>"; 
htmlstr += "<embed src=&#39;"+url+"&#39; type=&#39;application/x-shockwave-flash&#39; allowscriptaccess=&#39;always&#39; allowfullscreen=&#39;true&#39; wmode=&#39;opaque&#39; width=&#39;290&#39; height=&#39;260&#39;></embed>"; 
htmlstr += "</object>"; 
youku.innerHTML = htmlstr; 
}
Copier après la connexion


②Placez une iframe dans le conteneur p, afin que la page dans l'iframe puisse être actualisée dynamiquement sans affecter le courant page parent.
Je n'écrirai pas le code spécifique. L'idée générale est :
　1. Utilisez l'URL pour transmettre la valeur.
2. La page parent ou la page enfant crée un domaine caché pour stocker dynamiquement l'adresse que la page enfant doit obtenir.
　3. Utilisez la méthode ① pour réinitialiser l'objet objet dans la sous-page.
4. D'autres méthodes telles que window.open sont loin et ne sont pas recommandées.
À ce stade, l'intégration et le contrôle de la commutation vidéo ont été mis en œuvre avec succès. Mais par inadvertance, j'ai découvert un problème :
Après être passé à une nouvelle vidéo, si vous cliquez sur Actualiser ou appuyez sur F5 pour actualiser la page de quelque manière que ce soit, une erreur de script "objet manquant" apparaîtra. J'ai trouvé le code d'erreur et j'ai découvert qu'il s'agissait d'une erreur de script interne dans Flash :

function __flash__removeCallback(instance, name) {
instance[name] = null
}
<🎜; >Si utilisé dans la page, Flash est installé et la méthode flash.external.ExternalInterface.addCallback est utilisée dans Flash Lors de l'actualisation de la page Web, une erreur js de __flash__removeCallback sera signalée : objet manquant (ligne 53), (Jscript-. bloc de script). Le lieu d'appel de cette fonction est :

__flash__removeCallback(document.getElementById(""), "dewprev");

Évidemment, document.getElementById("") renvoie ici null. __flash__removeCallback pour signaler une erreur. Personnellement, je pense que la méthode intégrée de Flash devrait probablement être écrite comme ceci :

function __flash__removeCallback(instance, name) {
if (instance != null) { instance. [name] = null ; }
}

Quelqu'un a testé et découvert que document.getElementById("") ici sert à obtenir l'attribut id/name de l'objet de contrôle flash. La raison pour laquelle cette erreur se produit. C'est parce que l'identifiant n'est pas défini pour l'attribut Object. /name, il n'y aura aucune erreur après l'avoir défini. Mais en fait, tous mes objets ont des attributs id/name, donc je ne suis pas d'accord avec cette raison. De ce point de vue, cette méthode d'ajout d'identifiant/nom peut résoudre les problèmes de certaines personnes, et ce n'est pas la seule cause de ce problème.

Après cela, j'ai longuement cherché et j'ai finalement trouvé une solution sur un site Web étranger. Elle a été écrite par une personne nommée Dave Smith. J'ai apporté quelques améliorations en fonction de son code pour réduire cela. sur la page pour exécuter du code en continu. Le code qu'il a fourni est le suivant :

Le code est le suivant :

<script type="text/javascript"> 
(function(){ 
　　var setRemoveCallback = function(){ 
　　__flash__removeCallback = function(instance, name){ 
　　　　　　if (instance){ 
instance[name] =null; 
} 
}; 
window.setTimeout(setRemoveCallback, 10); 
}; 
setRemoveCallback(); 
})(); 
</script>
Copier après la connexion

Ce qu'il veut dire en gros : réécrire ce script dans Flash peut résoudre le problème actuel problème, mais à un moment donné après le chargement de l'objet objet, le script à l'intérieur de Flash écrasera la fonction que vous avez réécrite. Par conséquent, rien ne garantit que le joueur appellera la fonction que vous réécrivez le moment venu. Afin d'atteindre cet objectif, il a défini la fonction pour remplacer la fonction fournie dans le flash toutes les 10 millisecondes. Ce problème est résolu. Il a par la même occasion simplifié ce code pour former les deux "versions" suivantes :
Version une simplifiée : légèrement plus simple

Le code est le suivant : 

<script type="text/javascript"> 
　　var setRemoveCallback = function() { 
__flash__removeCallback = function(instance, name) { 
　　　　　　　if(instance) { 
instance[name] = null; 
} 
}; 
window.setTimeout(setRemoveCallback, 10); 
}; 
setRemoveCallback(); 
</script>
Copier après la connexion

Version simplifiée deux : super simple


Le code est le suivant :

<script type="text/javascript">(function(){var s=function(){__flash__removeCallback=function(i,n){if(i)i[n]=null;};window.setTimeout(s,10);};s();})();</script>
Copier après la connexion

J'y ai réfléchi un moment et je l'ai rationalisé :
Cette erreur est en train de rafraîchir La page est générée, et le processus de rafraîchissement de la page est la mort de l'ancienne page et le rechargement de la nouvelle page. En théorie, il n'y aura aucun problème pour recharger la nouvelle page, donc l'erreur se produit lors du travail de « suivi » avant la mort de l'ancienne page. Je peux atteindre le même objectif tant que je réécris la fonction de rappel dans le flash avant la mort de la page. Le code est le suivant et le test réussit.


Le code est le suivant :

/*解决视频切换内部脚本错误*/ 
<script type="text/javascript"> 
function endcall(){var s=function(){__flash__removeCallback=function(i,n){if(i)i[n]=null;};window.setTimeout(s,10);};s();} 
window.onbeforeunload = endcall; 
</script>
Copier après la connexion
Pour des exemples plus détaillés d'intégration de vidéos dans des pages HTML et des vidéos de changement de contrôle JS, veuillez faire attention au chinois PHP site Web pour des articles connexes!

Étiquettes associées：
HTML 嵌入视频 切换视频
source：php.cn
Article précédent：Analyse de la description détaillée de l'attribut de la méta-fenêtre HTML Article suivant：Exemple d'introduction et d'analyse de la différence entre les attributs id et name en entrée
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2052
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2205
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1862
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1749
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1771
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal