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>