コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLページへの動画の埋め込みとJS制御による動画の切り替え例を詳しく解説

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

高洛峰
リリース： 2017-03-06 16:57:59
オリジナル
2344 人が閲覧しました

この記事では、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 つのタグの下で同じ属性値の一貫性を保つように注意してください。
追記: タグと タグおよびその属性の紹介と使用法については、「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 サイトの関連記事に注目してください。

関連ラベル：
HTML 嵌入视频 切换视频
ソース：php.cn
前の記事：HTMLメタビューポート属性詳細説明解析 次の記事：入力の id 属性と name 属性の違いの例の紹介と分析
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2166
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2316
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1950
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1829
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1880
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート