HTMLページへの動画埋め込みとJSコントロール切り替えの詳細解説動画例_HTML/Xhtml_Webページ制作

まず、ページにビデオを埋め込むための HTML コードは次のとおりです。

コードをコピーします

コードは次のとおりです。

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

このうち、object タグと embed タグを同時に使用すると、より多くのブラウザに対応できるようになりますが、この 2 つの属性値は同じにすることに注意してください。タグに一貫性がある。
追記: 273238ce9338fbb04bee6997e5552b95 タグと d8e2720730be5ddc9c2a3782839e8eb6 タグの紹介と使用法については、「OBJECT タグ」と「EMBED タグ」の記事を参照してください。

それでは、JS を使用して埋め込み動画のアドレスを動的に変更して次の動画を再生する方法について説明します。
この時、タグ名やDOMメソッドを使って上記のparamノードのvalue属性やembedノードのsrc属性を見つけて、JSの動的代入を使ってアドレスを変更する方法がすぐに思いつく人も多いと思います。ただし、テストの結果、ビデオ アドレスは置き換えられたにもかかわらず、ページに表示されるビデオは変更されていないことがわかり、不可解でした。

埋め込まれたオブジェクトのすべてのパラメータは、ページがロードされるときに初期化されるため、次のビデオに切り替えることはできません。そのアドレス属性値を変更するだけでは機能しません。 。会社の従業員と同じように、住所が変更（移転）されましたが、彼は依然として元の従業員であり、別人ではありません。
私がよくリロードする方法は 2 つあります (上記のコードを例にします)。
① JS の obj.innerHTML メソッドを使用して、オブジェクト全体をリセットします。

コードをコピーします

コードは次のとおりです:

/*功能：动态切换视频*/ 
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; 
}

②p コンテナに iframe を配置し、iframe 内のページが表示されるようにします。現在の親ページに影響を与えることなく動的に更新されます。
具体的なコードは書きません。一般的な考え方は次のとおりです。
1. URL を使用して値を渡します。
2. 親ページまたは子ページは、子ページが取得するアドレスを動的に保存するための隠しドメインを作成します。
3.①の方法でサブページ内の対象オブジェクトをリセットします。
4. window.open などの他のメソッドは遠く離れたものであるため、お勧めできません。
この時点で、ビデオ切り替えの埋め込みと制御は正常に実装されました。しかし、意図せずして問題を発見しました。
新しいビデオに切り替えた後、更新をクリックするか、F5 キーを押すか、その他の方法でページを更新すると、「オブジェクトが見つかりません」というスクリプト エラーがポップアップ表示されます。エラー コードを見つけたところ、Flash の内部スクリプト エラーであることがわかりました。

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

ページで Flash が使用されており、flash.external.ExternalInterface.addCallback メソッドが flash で使用されている場合、__flash__removeCallback Web ページが更新されると、「js エラー: オブジェクトが見つかりません (行 53)、(Jscript-scriptblock)」が報告されます。この関数の呼び出し場所は次のとおりです:

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

明らかに、ここで document.getElementById("") は null を返します。これにより、__flash__removeCallback がエラーを報告することになると個人的には考えています。 :

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

誰かがテストして、ここで document.getElementById("") がフラッシュ コントロール オブジェクトの id/name 属性を取得することであることがわかりました。このエラーが発生する理由は次のとおりです。オブジェクトの ID/名前が設定されていないため、設定後にエラーは発生しません。しかし実際には、すべてのオブジェクトには id/name 属性があるため、この理由には同意できません。この観点から見ると、この ID/名前を追加する方法は一部の人の問題を解決できますが、これがこの問題の唯一の原因ではありません。
その後、私は長い間懸命に検索し、最終的には Dave Smith という人が書いた解決策を見つけました。そのコードをベースにいくつかの改良を加え、ページ数を減らしました。コードを実行するというプレッシャー。彼が提供したコードは次のとおりです:

コードをコピーします

コードは次のとおりです:

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

彼が意味するのは、大まかに言うと、このスクリプトを内部で書き直すことです。 flash が問題を解決できる 現在の問題は、オブジェクトがロードされた後のある時点で、flash 内のスクリプトが書き換えた関数を上書きしてしまうことです。したがって、必要なときにプレイヤーが書き換えた関数を呼び出すという保証はありません。この目標を達成するために、フラッシュ内に提供されている関数を 10 ミリ秒ごとにオーバーライドする関数を設定しました。この問題は解決されました。同時に、彼はこのコードを簡略化し、次の 2 つの「バージョン」を形成しました:
簡略化バージョン 1: もう少し単純化

コードをコピーします

コードは次のとおりです:

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

簡略化バージョン 2: 超簡単

コードをコピー

コードは次のとおりです:

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

私はこう思いました
このエラーは、ページを更新するときに発生し、古いページが削除され、新しいページが再ロードされます。理論的には、新しいページを再読み込みしても問題はないため、古いページが消滅する前の「アフターケア」作業でエラーが発生します。ページが終了する前にフラッシュ内のコールバック関数を書き直すだけで、同じ目的を達成できます。コードは次のとおりで、テストは成功します。

コードをコピーします

コードは次のとおりです:

/*解决视频切换内部脚本错误*/ 
<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>