Explication détaillée de l'intégration de vidéos dans les pages HTML et de la commutation vidéo sous JS control_HTML/Xhtml_Web production de pages

Tout d'abord, le code HTML pour intégrer la vidéo dans la page est :

Copiez le code

Le code est comme suit :

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

Parmi eux, utiliser les balises object et embed en même temps doit être compatible avec plus de navigateurs, mais veuillez faire attention à conserver les mêmes valeurs d'attribut​​sous les deux balises cohérentes.
PS : Pour l'introduction et l'utilisation des balises 273238ce9338fbb04bee6997e5552b95 et d8e2720730be5ddc9c2a3782839e8eb6 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 ci-dessus et l'attribut src du nœud intégré, 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. Il n'est pas possible de changer simplement la valeur de son attribut d'adresse. . 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.

Copiez le code

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

②Placez une iframe dans le conteneur p, afin que la page dans l'iframe puisse être actualisé dynamiquement sans affecter la page parent actuelle.
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, cliquer sur Actualiser ou appuyer sur F5 ou toute autre méthode pour actualiser la page fera apparaître une erreur de script "objet manquant". 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 Flash est utilisé dans la page et que la méthode flash.external.ExternalInterface.addCallback est utilisée dans Flash, __flash__removeCallback sera signalé lors de l'actualisation de la page Web. Erreur js : objet manquant (ligne 53), (Jscript-scriptblock). Le lieu d'appel de cette fonction est :

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

Évidemment, document.getElementById("") renvoie ici null, ce qui amènera __flash__removeCallback à signaler une erreur. Je pense personnellement que la méthode flash intégrée. devrait être écrit comme ceci :

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

Quelqu'un a testé et trouvé 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 est parce que. l'identifiant/nom n'est pas défini pour les propriétés de l'objet, il n'y aura aucune erreur après les avoir définis. 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 étranger. Elle a été écrite par une personne nommée Dave Smith. J'ai apporté quelques améliorations basées sur son code, ce qui a réduit le nombre de pages. Pression pour exécuter du code. Le code qu'il a fourni est le suivant :

Copier le code

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>

Ce qu'il veut dire, c'est en gros : réécrire ce script à l'intérieur Flash peut résoudre le problème Le problème actuel est qu'à un moment donné après le chargement de l'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. Par la même occasion, il a simplifié ce code pour former les deux "versions" suivantes :
Version 1 simplifiée : légèrement plus simple

Copier le code

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>

Version simplifiée deux : super simple

Copier le code

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>

Je pensais pendant un moment et j'ai rationalisé mes pensées :
Cette erreur se produit lors du rafraîchissement de la page. Le processus de rafraîchissement de la page entraîne 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.

Copiez le code

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>