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 から学べること (画像とテキスト)

推薦する

HTML テーブルタグと関連する改行の問題の詳細な分析

テーブルとは何ですか?テーブルは、データのキャリアである HTML テーブルです。以下は比較的標準的...

よく理解しましたかタグ 定義方法 使用方法

序文:今日、「<!DOCTYPE> タグを注意深く理解しましたか?」と尋ねられました。私...

MySql でメモリ使用量を削減する方法の詳細な説明

序文デフォルトでは、MySQL はデータベース クエリ データをキャッシュするために大きなメモリ ブ...

CSS モジュールソリューション

CSS のモジュール ソリューションは、JS のモジュール ソリューションと同じくらい多く存在すると...

Vue.js ソースコード解析のカスタム手順の詳細な説明

序文コア機能のデフォルトの組み込みディレクティブ (v-model および v-show) に加えて...

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

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

MySQL マスターとスレーブの不整合とその解決策の詳細な説明

1. MySQL マスタースレーブ非同期1.1 ネットワーク遅延MySQLのマスタースレーブレプリケ...

Linux Jenkins 構成スレーブノード実装プロセス図

序文: Jenkins のマスター スレーブ分散アーキテクチャは、主に、Jenkins に単一ポイン...

3 階層ナビゲーション メニューを実現するための js+css

この記事の例では、3レベルのナビゲーションメニューを実装するためのjs + cssの具体的なコードを...

MySQLのジョイントクエリについて詳しく説明します

目次ユニオンクエリ1. 中国の各省のIDと名前を照会する2. 湖南省のすべての地級市のIDと名称3....

単一行関数と文字計算日付プロセス制御を説明する MySQL の例

目次1. キャラクター機能1. ケースコントロール機能2. キャラクターコントロール機能2. 数学関...

CentOS7で新しいデータディスクをマウントするための完全な手順

序文新しい VPS を購入しました。新しい VPS のデータ ディスクはデフォルトではシステムにマウ...

HTML+CSSを使用してマウスの動きを追跡する

ユーザーがプライバシーを意識するようになり、オンライン トラッキングに対する予防策を強化するにつれて...

Vue プロジェクト @change 複数のパラメータを使用して複数のイベントを渡す

まず、変更イベントは 1 つだけです。 changelevel() //値を選択選択を変更して行の値...

モバイルウェブページのサイズ調整を実装する方法

ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で...