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
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>
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
Le code est le suivant :
/*功能：动态切换视频*/
function setvideo(url){
var youku = document.getElementById("youku");
var htmlstr = "<object id='obx' name='obx' width='290' height='260'>";
htmlstr += "<param name='movie' value='"+url+"'></param>";
htmlstr += "<param name='allowFullScreen' value='true'></param>";
htmlstr += "<param name='allowscriptaccess' value='always'></param>";
htmlstr += "<param name='wmode' value='opaque'></param>";
htmlstr += "<embed src='"+url+"' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' wmode='opaque' width='290' height='260'></embed>";
htmlstr += "</object>";
youku.innerHTML = htmlstr;
}
②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 :
<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 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
<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
<script type="text/javascript">(function(){var s=function(){__flash__removeCallback=function(i,n){if(i)i[n]=null;};window.setTimeout(s,10);};s();})();</script>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.
/*解决视频切换内部脚本错误*/
<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>
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1393
52
1207
24
HTML est-il facile à apprendre pour les débutants?
Apr 07, 2025 am 12:11 AM
HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Quel est un exemple d'une balise de départ dans HTML?
Apr 06, 2025 am 12:04 AM
Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web?
Apr 04, 2025 pm 11:30 PM
L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...
Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404?
Apr 04, 2025 pm 11:54 PM
GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...
Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué?
Apr 05, 2025 am 06:15 AM
Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...
HTML, CSS et JavaScript: outils essentiels pour les développeurs Web
Apr 09, 2025 am 12:12 AM
HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.
