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 クエリを最適化する 4 つの方法

目次1. 時間が経つにつれて限界が遅くなる理由2. 百万データシミュレーション1. 従業員テーブルと...

HTMLはWEB標準の開発の中心的な基盤です

HTML 中心のフロントエンド開発は、ほぼ Web 標準の意味です。共通しているのは「分離」という考...

ネイティブ JavaScript でオブジェクトが空かどうかをチェックする実装例

目次ネイティブJavaScriptとはA. 新しいブラウザでnullオブジェクトをチェックするコンス...

Webデザイナーの成長体験

<br />まず最初に、私はこのグループの中では完全な新人だということを述べなければなり...

アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します

目次環境: 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...

VMware 仮想マシンで HTTP サービスを確立して分析する手順

1. xshell を使用して仮想マシンに接続するか、仮想マシンに直接コマンドを入力します。以下はx...

Ubuntu 16.04/18.04 に Pycharm と Ipython をインストールするチュートリアル

Ubuntu 18.04の場合1. sudo apt install python 。コマンドライン...

JSはフロントエンドのページング効果を実現します

この記事の例では、フロントエンドのページング効果を実現するためのJSの具体的なコードを参考までに共有...

ルート権限なしでログインするためのDockerソリューション

docker コマンドを初めて使用する場合、権限の問題を確認するメッセージが表示されます。 unix...

Linux でアップロードされたファイルのスケジュールされたバックアップと増分バックアップを実装する方法

導入Alibaba Cloud のような OSS ストレージ サービスを使用している場合は、サービス...

MySQL の基本ステートメントを最適化するための 10 の原則の概要

序文データベースの応用において、プログラマーは継続的な実践を通じて多くの経験を積んできました。これら...

CSSのさまざまな背景、使用シナリオ、テクニックの詳細な分析

この記事はGitHub https://github.com/qq449245884/xiaozhi...

JS を使用して Web ページのウォーターフォール レイアウトを実装する方法

目次序文:ウォーターフォールレイアウトとは何ですか?達成方法: 1. 画像を取得する2. 画像の帯域...

AngularJSループオブジェクトプロパティで動的列を実装するアイデアの詳細な説明

動的な列を実現するための Angularjs ループ オブジェクト プロパティ利点: オブジェクトを...