HTML ファイルにフラッシュ ビデオ形式 (flv、swf) ファイルを埋め込む方法

HTML ファイルにフラッシュ ビデオ形式 (flv、swf) ファイルを埋め込む方法
Flash ファイル形式: .FLV および .SWF

フラッシュ ビデオ形式には、.flv と .swf の 2 つの拡張子があります。それらの違いは何ですか?

(1).flvファイル(フラッシュビデオ)は、画像ベースのビデオストリームとオーディオです。ストリーミング サービスを実行している場合は、flv が適切な選択肢になります。アップストリーム条件は、このファイルのどの部分にもクライアント端末からアクセスでき、いつでもダウンロードを待機する必要がないことです。とはいえ、ストリーミング サービスを運営するにはコストがかかります。

(2) .swf は Macromedia Flash ファイル形式でもあり、スクリプトなどを含む完全なビデオ オーディオ ファイルです。これにより、「疑似ストリーミング」とも呼ばれる HTTP (プログレッシブ) ダウンロードが容易になります。ファイルの一部がダウンロードされると、ビデオ セグメントはすぐに再生されますが、ファイル全体がダウンロードされない限り、クライアントはフラッシュ ファイル セグメントがダウンロードされるまで待機してからアクセスします (早送りはできません)。これは私たちがよく話題にしていることですが、ビデオ メディアをストリーミングするためのシンプルで安価で簡単な方法です。 SWF は公式の略語ではなく、「ShockWave Flash」または「Small Web Format」の略語であると主張する人もいます。

ページに Flash を埋め込むには、次の方法を使用できます。

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

<オブジェクトクラスid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
コードベース="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0"
幅="320" 高さ="400" >
<param name="movie" value="ビデオファイル名.swf">
<param name="quality" value="high">
<パラメータ名="play" 値="true">
<パラメータ名="LOOP" 値="false">
<embed src="ビデオファイル名.swf" width="320" height="400" play="true" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
タイプ="application/x-shockwave-flash">
</埋め込み>
</オブジェクト>

ここで注意する必要があるのは、<param name="movie" value="video-filename.swf"> と <embed src="video-filename.swf" です。この 2 つの場所は、swf ファイルの場所の名前です。その他のパラメータについては、上記のリンクの紹介を参照してください。

しかし、これを書いた後、ページ内のswf形式のファイルは表示できるものの、flv形式のファイルは再生できなくなりました。しばらく苦労した後、Dreamweaver からの解決策をまとめました。

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

<script type="text/javascript">
関数 MM_CheckFlashVersion(reqVerStr,msg){
(ナビゲーター){
var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
if (!isIE || !isWin){
var flashVer = -1;
プラグイン && plugins.length > 0 の場合{
var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
if (desc == "") flashVer = -1;
それ以外{
var descArr = desc.split(" ");
var tempArrMajor = descArr[2].split(".");
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + "." + verMinor);
}
}
// WebTV には Flash Player 4 以下が搭載されています (ビデオには低すぎます)
それ以外の場合 (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;
var verArr = reqVerStr.split(",");
var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
フラッシュバージョン < 必要バージョンの場合{
if (確認(メッセージ))
window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
}
}
}
}
</スクリプト>
</head>
<body onload="MM_CheckFlashVersion('7,0,0,0','このページのコンテンツには、新しいバージョンの Macromedia Flash Player が必要です。今すぐダウンロードしますか?');">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="314" height="234" id="FLVPlayer">
<param name="movie" value="FLVPlayer_Progressive.swf" />
<param name="salign" value="lt" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=%E8%80%81%E5%A4%A9%E4%B8%8B%E8%B4%B0%E4%B9%8B%E8%8E%AB%E9%97%AE%E4%BB%8A%E6%9C%9D&autoPlay=true&autoRewind=true" />
<embed src="FLVPlayer_Progressive.swf" flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=%E8%80%81%E5%A4%A9%E4%B8%8B%E8%B4%B0%E4%B9%8B%E8%8E%AB%E9%97%AE%E4%BB%8A%E6%9C%9D&autoPlay=true&autoRewind=true" quality="high" scale="noscale" width="314" height="234" name="FLVPlayer" salign="LT" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</オブジェクト>

追加のバージョン管理メソッド MM_CheckFlashVersion() があります。

下の部分はswfと似た書き方ですが、若干の違いがあります。 <param name="movie" value="FLVPlayer_Progressive.swf" これは再生ファイルではなく、プレーヤーに相当するファイルです。Dreamweaver を使用してフラッシュ ファイルを挿入すると、FLVPlayer_Progressive.swf と Clear_Skin_3.swf というファイルが見つかります。前者はプレーヤーに相当し、後者はスキンに相当します。Dreamweaver にはさまざまなスキンが用意されており、必要に応じて使用できます。上記のコードでは、プレーヤー ファイル FLVPlayer_Progressive.swf が 2 か所で使用されています。これは swf と非常に似ていますが、ソース ファイルではありません。コードでは、スキンを設定するために skinName が使用され、他のプロパティは比較的理解しやすいです。

まとめると、flv 形式を埋め込む際に重要なポイントは 3 つあります。1. プレーヤー FLVPlayer_Progressive.swf。このファイルは必須であり、flv ソース ファイルと同じファイル ディレクトリに配置する必要があります (理由はまだわかっていません)。2. スキン skinName=Clear_Skin_3。スキンを置き換えることができますが、これも必須であり、flv ソース ファイルと一緒に配置する必要があります。 3. ソース ファイル、streamName、このパラメータは、サフィックスなしのソース ファイルのファイル名を表示します。ファイル名が中国語の場合、Dreamweaver はその名前を長い文字列に変換します。 。 。 。 html ファイルと flv ファイルが同じファイル ディレクトリにない場合は、ファイル パスを含める必要があります (プロジェクトではこれに特に注意してください)。



図は、同じページに 2 つのスキンが使用され、1 つは自動再生に設定され、もう 1 つは手動再生に設定されていることを示しています。ファイル形式はflvです。

<<:  HTML+CSS で div タグの右上隅に削除アイコンを追加するサンプルコード

>>:  Google の新しい UI から学べること (画像とテキスト)

推薦する

MySQLで数千万のテストデータを素早く作成する方法

述べる:この記事で扱うデータ量は 100 万です。数千万のデータが必要な場合は、量を増やすだけで済み...

Centos7でのMySQLインストールチュートリアル

MySQLインストールチュートリアル、参考までに具体的な内容は次のとおりです。 1. ダウンロードY...

MySQL内部一時テーブルの具体的な使用法

目次連合テーブルの初期化ステートメントの実行連合の結果ユニオンオールグループ化十分なメモリステートメ...

Reactドラッグフックを実装するための100行以上のコード

序文ソースコードは合計で 100 行強しかありません。これを読めば、react-dnd などの成熟し...

ReactプロジェクトでのTypeScriptの実装

目次1. はじめに2. 使用方法ステートレスコンポーネントステートフルコンポーネント制御コンポーネン...

JSにおけるデータ型の正しい判定方法の例

目次序文typeof は型を正しく判別できますか? instanceof は型を正しく判別できますか...

Ubuntu 18.04 向け VMware Tools のインストールと構成のチュートリアル

この記事では、Ubuntu 18.04でのVMware Toolsのインストールと設定について記録し...

ウェブページを作るときに注意すべき5つのポイント

1. 色合わせの問題<br />Web ページには 3 色以上使用しないでください。そう...

ネイティブ js でカスタム スクロール バーを実装する

この記事の例では、カスタムスクロールバーを実装するためのjsの具体的なコードを参考までに共有していま...

MySQL 8.0はJSONを扱えるようになりました

目次1. 概要2. JSON基本ツール3. JSONパス式4. JSONを検索して変更する序文:長い...

Nginx try_files ディレクティブの使用例

Nginx の設定構文は柔軟で、高度に制御可能です。バージョン 0.7 以降では、try_files...

Linux で ffmpeg をインストールするための詳細なチュートリアル

1. CentOS Linuxにffmpegをインストールする1.ダウンロードして解凍する http...

WeChatアプレットの入力レベルとテキストエリアレベルの浸透率が高すぎる問題の解決策

WeChat ミニプログラムのネイティブ コンポーネントであるカメラ、キャンバス、入力 (フォーカス...

MySQLでテーブル名を変更する方法と注意すべき点

目次1. テーブル名を変更する方法2. 注記要約: 1. テーブル名を変更する方法RENAME TA...