HTMLページ埋め込み動画、JSコントロールスイッチ動画例詳細
2022-01-26 22:16:34
まず、動画をページに埋め込むためのHTMLコードです。
<div 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>
</div>
より多くのブラウザとの互換性を保つためにobjectタグとembedタグの両方が使用される場合ですが、両方のタグで同じ属性値を統一するように注意してください。
追記: <object> と <embed> のタグとその属性の紹介と使い方については、OBJECTとEMBEDタグの記事を参照してください。
次に、JS を使って、次の動画を再生するために、埋め込み動画のアドレスを動的に変更する方法について説明します。
ここで多くの人がすぐに思いつくのは、タグ名やDOMを使って、上記のparamノードのvalueプロパティとembedノードのsrcプロパティを見つけ出し、JSで動的に値を代入してアドレスを変更することでしょう。ところが、テストしてみると、動画のアドレスは入れ替わっても、ページに表示される動画は同じままだったので、困惑しました。
埋め込みオブジェクトのパラメータはすべてページの読み込み時に初期化されるため、次の動画に切り替えて再生するにはリロードさせるしかなく、単にそのアドレスプロパティの値を変更するだけではうまくいかないことが判明しました。住所が変わった(引っ越した)会社の社員が、別人でなく同じ社員のままであるようなものです。
私がよく使うリロードさせる方法は2つあります(上記のコードを例にして)。
① JSのobj.innerHTMLメソッドでオブジェクトオブジェクト全体をリセットする。
/* Function: Dynamic video switching*/
function setvideo(url){
var youku = document.getElementById("youku");
var htmlstr = "<object id='obx' name='obx' width='290' height='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キーを押して何らかの方法でページを更新すると、"missing object"というスクリプト エラーがポップアップ表示されます。エラーコードを調べると、Flashの内部スクリプトエラーであることがわかりました。
function __flash__removeCallback(instance, name) {。
instance[name] = nullとする。
}
ページ内でflashが使用されており、flash.external.ExternalInterface.addCallbackメソッドが使用されている場合、ページを更新すると、__flash__removeCallback js error: missing object (Line 53), (Jscript -scriptblock)と報告されます。この関数は、次の場所で呼び出されます。
__flash__removeCallback(document.getElementById(""), "dewprev") を使用します。
明らかに、ここでは document.getElementById("") が null を返すので、__flash__removeCallback がエラーを報告します。個人的には、この flash の組み込みメソッドはおそらくこのように記述するべきだと考えています。
function __flash__removeCallback(instance, name) {。
if (instance ! = null) { instance[name] = null; }.
}
このエラーの原因は、オブジェクトにid/nameプロパティが設定されていないためで、設定すればエラーにはならないとのことです。しかし、実際、私のオブジェクトにはid/nameプロパティが設定されているので、この理由には納得がいきません。というわけで、このid/nameをつける方法で解決できる人もいるようですが、それだけが原因ではないようです。
彼が提供したコードは以下の通りです。
<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ミリ秒ごとにflashが提供する関数を上書きするように設定している。これで問題は解決した。同時に、彼はコードを簡略化して、次の2つの "version"を作成しました。
簡易版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>
私は自分の考えを整理するために、しばらく考えた:。
ページ更新時にエラーが発生し、ページ更新の処理は、古いページの消滅と新しいページの再読み込みである。理論的には新しいページを再読み込みしても何も問題はないので、古いページが消滅する前の"aftercare"でエラーが発生するのです。ページが死ぬ前にこのコールバック関数をflash内部で以下のようなコードに書き換えることで同じことが実現でき、テストに合格しました。
/*resolve video switch internal script error*/
<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>
コピーコード
コードは以下の通りです。
<div 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>
</div>
より多くのブラウザとの互換性を保つためにobjectタグとembedタグの両方が使用される場合ですが、両方のタグで同じ属性値を統一するように注意してください。
追記: <object> と <embed> のタグとその属性の紹介と使い方については、OBJECTとEMBEDタグの記事を参照してください。
次に、JS を使って、次の動画を再生するために、埋め込み動画のアドレスを動的に変更する方法について説明します。
ここで多くの人がすぐに思いつくのは、タグ名やDOMを使って、上記のparamノードのvalueプロパティとembedノードのsrcプロパティを見つけ出し、JSで動的に値を代入してアドレスを変更することでしょう。ところが、テストしてみると、動画のアドレスは入れ替わっても、ページに表示される動画は同じままだったので、困惑しました。
埋め込みオブジェクトのパラメータはすべてページの読み込み時に初期化されるため、次の動画に切り替えて再生するにはリロードさせるしかなく、単にそのアドレスプロパティの値を変更するだけではうまくいかないことが判明しました。住所が変わった(引っ越した)会社の社員が、別人でなく同じ社員のままであるようなものです。
私がよく使うリロードさせる方法は2つあります(上記のコードを例にして)。
① JSのobj.innerHTMLメソッドでオブジェクトオブジェクト全体をリセットする。
コピーコード
コードは以下の通りです。
/* Function: Dynamic video switching*/
function setvideo(url){
var youku = document.getElementById("youku");
var htmlstr = "<object id='obx' name='obx' width='290' height='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キーを押して何らかの方法でページを更新すると、"missing object"というスクリプト エラーがポップアップ表示されます。エラーコードを調べると、Flashの内部スクリプトエラーであることがわかりました。
function __flash__removeCallback(instance, name) {。
instance[name] = nullとする。
}
ページ内でflashが使用されており、flash.external.ExternalInterface.addCallbackメソッドが使用されている場合、ページを更新すると、__flash__removeCallback js error: missing object (Line 53), (Jscript -scriptblock)と報告されます。この関数は、次の場所で呼び出されます。
__flash__removeCallback(document.getElementById(""), "dewprev") を使用します。
明らかに、ここでは document.getElementById("") が null を返すので、__flash__removeCallback がエラーを報告します。個人的には、この flash の組み込みメソッドはおそらくこのように記述するべきだと考えています。
function __flash__removeCallback(instance, name) {。
if (instance ! = null) { instance[name] = null; }.
}
このエラーの原因は、オブジェクトにid/nameプロパティが設定されていないためで、設定すればエラーにはならないとのことです。しかし、実際、私のオブジェクトにはid/nameプロパティが設定されているので、この理由には納得がいきません。というわけで、このid/nameをつける方法で解決できる人もいるようですが、それだけが原因ではないようです。
彼が提供したコードは以下の通りです。
コピーコード
コードは以下の通りです。
<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ミリ秒ごとにflashが提供する関数を上書きするように設定している。これで問題は解決した。同時に、彼はコードを簡略化して、次の2つの "version"を作成しました。
簡易版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>
私は自分の考えを整理するために、しばらく考えた:。
ページ更新時にエラーが発生し、ページ更新の処理は、古いページの消滅と新しいページの再読み込みである。理論的には新しいページを再読み込みしても何も問題はないので、古いページが消滅する前の"aftercare"でエラーが発生するのです。ページが死ぬ前にこのコールバック関数をflash内部で以下のようなコードに書き換えることで同じことが実現でき、テストに合格しました。
コピーコード
コードは以下の通りです。
/*resolve video switch internal script error*/
<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>
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン