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選

推薦する

WeChatミニプログラムのすべてのページがログインされていることを確認する方法

目次現状解決さらなる解決策やっと現状WeChat ミニプログラムには、ホームページ、個人ページ、いく...

nginx ログを elasticsearch にインポートする方法の例

nginx ログは filebeat によって収集され、logstash に渡され、logstash...

mysql maxとwhere間の実行問題の概要

mysql maxとwhereの間の実行の問題SQLを実行します: テーブル「grades」を作成し...

Apache Tomcat と IDEA エディターの統合に関する詳細なチュートリアル

1. Apache Tomcat 公式サイトから Tomcat 圧縮パッケージをダウンロードします。...

Alibaba Cloud CentOS7 サーバーの nginx 構成と FAQ の分析

序文:この記事は、jackyzm のブログ https://www.cnblogs.com/jack...

メニューノードのすべての子ノードを再帰的に検索する MySQL メソッド

背景プロジェクトにはメニューノードのすべてのノードをチェックする要件があります。オンラインでチェック...

nuxt.js 複数の環境変数の設定

目次1. はじめに2. シナリオ3. 環境を整える3.1 環境変数の挿入4. 最後に1. はじめに一...

SpringBoot プロジェクトの Docker 環境を実行するときに発生する無限再起動問題の詳細な説明

もしかしたら私の考え方が間違っていたのかもしれないし、問題の説明が少し乱雑だったのかもしれないが、こ...

Trash-Cli: Linux のコマンドラインごみ箱ツール

ゴミ箱は Linux ユーザー、Windows ユーザー、Mac ユーザーにとって非常に一般的なので...

ブラウザのキャッシュを防ぐために、js または css の後に ?v= バージョン番号を追加します。

コードをコピーコードは次のとおりです。 <span style="font-size...

MySQLトリガーの使用

目次1. トリガーの紹介1. トリガーとは何ですか? 2. トリガーの特徴2. トリガーを作成する1...

MySQL ステートメントの配置と概要の紹介

SQL (Structured Query Language) ステートメント、つまり構造化クエリ言...

CentOS 8.4 に Docker をインストールする詳細なチュートリアル

目次序文:システム要件:インストール環境:古いバージョンをアンインストールします: yum は具体的...

vscodeを使用してuniappを開発する方法

私はフロントエンド プロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小...

iframe を更新する 3 つの方法

コードをコピーコードは次のとおりです。 <iframe src="1.htm&quo...