communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > le corps du texte

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

不言
Libérer： 2018-05-22 14:57:45
original
3393 Les gens l'ont consulté

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>
Copier après la connexion

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 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 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; 
}
Copier après la connexion

②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; 
}
Copier après la connexion

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");
Copier après la connexion

É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; } 
}
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion


Étiquettes associées：
html
source：php.cn
Article précédent：Quels attributs cachés dans le formulaire peuvent être soumis avec la production de pages form_HTML/Xhtml_Web Article suivant：Contrôler le centrage vertical du texte dans les zones de texte HTML via la production de pages css_HTML/Xhtml_Web
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
Conversion automatique PX en erreur REM  <style>html {   taille de police : calc(100vw / 3,75);      }body {    taille de la...
Depuis 2024-04-16 09:34:16
0
0
4687
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
Depuis 2024-04-06 20:22:15
0
1
454
Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
Depuis 2024-04-06 20:02:10
0
2
543
Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany...
Depuis 2024-04-06 17:40:41
0
2
410
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