HTMLページへの動画の埋め込みとJS制御による動画の切り替え例を詳しく解説

この記事では、HTML ページに動画を埋め込む方法と、JS を使用して動画の切り替えを制御する方法を詳しく紹介します。詳細は以下のとおりです。 まず、ページに動画を埋め込むための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 の内部スクリプト エラーであることがわかりました。 externalInterface.addCallback メソッドが Flash で使用されている場合、Web ページを更新すると、__flash__removeCallback の js エラーが報告されます: missing object (Line 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/name 属性が設定されていないためです。間違いがないこと。しかし実際には、すべてのオブジェクトには 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 内のスクリプト 書き換えたこの関数は上書きされます。したがって、必要なときにプレイヤーが書き換えた関数を呼び出すという保証はありません。この目標を達成するために、フラッシュ内に提供されている関数を 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>

HTML ページへのビデオ埋め込みと JS コントロールのビデオ切り替えの詳細な例については、PHP 中国語 Web サイトの関連記事に注目してください。