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

HTMLページ埋め込み動画とJSコントロール切り替え動画例の詳しい説明
まず、ページにビデオを埋め込むための HTML コードは次のとおりです。

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

<div id="youku" class="youku">
<オブジェクト id="obx" 名前="obx" 幅="290" 高さ="260">
<param name="映画" value="http://www.tudou.com/v/6HJvxxkarzk/&resourceId=0_04_11_19/v.swf"></param>
<param name="allowFullScreen" 値="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="wmode" value="不透明"></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>
</オブジェクト>
</div>

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 という男性によって書かれていました。私は彼のコードを基にいくつかの改良を加え、常にコードを実行するページの負担を軽減しました。彼が提供したコードは次のとおりです。

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

<script type="text/javascript">
(関数(){
var setRemoveCallback = 関数(){
__flash__removeCallback = 関数(インスタンス、名前){
if (インスタンス){
インスタンス[名前] =null;
}
};
ウィンドウのタイムアウトを設定します(コールバックの削除、10);
};
コールバックを削除します。
})();
</スクリプト>

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

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

<script type="text/javascript">
var setRemoveCallback = 関数() {
__flash__removeCallback = 関数(インスタンス、名前) {
if(インスタンス) {
インスタンス[名前] = null;
}
};
ウィンドウのタイムアウトを設定します(コールバックの削除、10);
};
コールバックを削除します。
</スクリプト>

簡易版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">
関数 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選

推薦する

nofollowタグの使用と分析に関する簡単な説明

nofollowをめぐる論争Zac と Guoping の間では、nofollow が PR を無駄...

美しいチェックボックススタイル(複数選択ボックス)はIE8/9/10、FFなどと完全に互換性があります。

恥ずかしながら、このようなよく使われるチェックボックスのスタイルを変更するために、Baidu で長い...

js に基づいて大きなファイルのアップロードとブレークポイントの再開を管理する方法

目次序文フロントエンド構造バックエンド構造(ノード+エクスプレス) FormDataに基づくファイル...

MySQL シリーズ: redo ログ、undo ログ、binlog の詳細な説明

取引の実施REDO ログはトランザクションの永続性を保証し、UNDO ログはトランザクションのロール...

my.cnf (my.ini) 重要なパラメータの最適化設定手順

MyISAM ストレージエンジンMyISAM ストレージ エンジンは、書き込みよりも読み取りが多く、...

初心者向けBootstrap 3.0学習ノート

この学習ノートの最初の記事として、シリーズの他の記事と同様に、Bootstrap の紹介から始め、そ...

Linux システムでの Selenium クローラー プログラムの導入の概要

目次序文1. セレンとは何ですか? 2. 使用手順1. ライブラリをインポートする2. テストコード...

alpineをベースにdockerfileで作成したtomcatイメージの実装

1.アルパインイメージをダウンロードする [root@docker43 ~]# docker pul...

Spark と Scala を使用して Apache アクセス ログを分析する方法

インストールまず、Java と Scala をインストールし、次に Spark をダウンロードしてイ...

http:// の代わりに // を使用する利点は何ですか (アダプティブ https)

//デフォルトプロトコル/ デフォルト プロトコルの使用は、リソース アクセス プロトコルが現在の...

ネイティブ js カプセル化シームレスカルーセル機能

ネイティブjsカプセル化シームレスカルーセルプラグイン、参考までに、具体的な内容は次のとおりです。例...

React でのポータルとエラー境界処理の実装

目次ポータルエラー境界処理エラー境界を使用しない場合はどうなりますか?注記ポータルスロットとも言えま...

docker ベースの mariadb のインストール構成プロセスの分析

1. インストール dockerhub を通じてインストールする mariadb のバージョンを検索...

MySQL 5.7 mysql コマンドラインクライアントの使用コマンドの詳細

MySQL 5.7コマンドを使用するMySQLコマンドラインクライアント1. パスワードを入力してく...

JavaScriptはシンプルな計算機能を実装します

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...