HTMLページ埋め込み動画とJSコントロール切り替え動画例の詳しい説明

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

コードをコピー

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

object タグとembed タグは、より多くのブラウザと互換性を持たせるために一緒に使用されますが、2 つのタグの下で同じ属性値が一貫していることを確認してください。
PS: <object> タグと <embed> タグおよびその属性の概要と使用方法については、OBJECT タグと EMBED タグの記事を参照してください。

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

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

コードをコピー

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

/*機能: ビデオを動的に切り替える*/
関数setvideo(url){
var youku = document.getElementById("youku");
var htmlstr = "<オブジェクト id='obx' 名前='obx' 幅='290' 高さ='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;
}

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

関数__flash__removeCallback(インスタンス、名前) {
インスタンス[名前] = null;
}

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

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

明らかに、document.getElementById("") は null を返すため、__flash__removeCallback はエラーを報告します。flash の組み込みメソッドは次のように記述する必要があると思います。

関数__flash__removeCallback(インスタンス、名前) {
インスタンスが null の場合、インスタンス[名前]は null になります。
}

誰かがテストした結果、document.getElementById("") がフラッシュコントロールオブジェクトの id/name 属性を取得するために使用されていることがわかりました。このエラーの原因は、オブジェクトに id/name 属性が設定されていないことです。設定後はエラーは発生しません。しかし実際には、私のオブジェクトにはすべて id/name 属性があるため、この理由には同意できません。このことから、ID/名前を追加するこの方法は一部の人にとっては問題を解決できることがわかりますが、これがこの問題を引き起こす唯一の理由ではありません。

その後、長い間探し回って、ついに海外のウェブサイトで解決策を見つけました。それは Dave Smith という男性によって書かれていました。私は彼のコードを基にいくつかの改良を加え、常にコードを実行するページの負担を軽減しました。彼が提供したコードは次のとおりです。

コードをコピー

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

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

コードをコピー

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

簡易版2: 超シンプル

コードをコピー

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

私はしばらくそれについて考え、自分の考えを整理しました。
このエラーは、ページを更新するときに発生します。ページを更新するプロセスでは、古いページが破棄され、新しいページが再読み込みされます。理論的には、新しいページをリロードしても問題はないはずなので、古いページが消える前の「余波」作業中にエラーが発生します。ページが消える前にフラッシュ内のコールバック関数を書き直すことで、同じ目的を達成できます。コードは次のようになり、テストは合格します。

コードをコピー

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

/*ビデオ切り替えの内部スクリプトエラーを解決する*/
<script type="text/javascript">
関数 endcall(){var s=function(){__flash__removeCallback=function(i,n){if(i)i[n]=null;};window.setTimeout(s,10);};s();}
window.onbeforeunload = 終了呼び出し;
</スクリプト>

<<: MySQLのREDOログとUNDOログの詳細な説明

>>: おすすめの無料英語手書きフォント20選