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

推薦する

jQueryはクッキーを操作する

コードをコピーコードは次のとおりです。 jQuery.cookie = 関数(名前、値、オプション)...

ウェブカラーのコントラストと調和のテクニックの共有

色のコントラストと調和対照的な状況では、色の相互作用は単一の色によって与えられる感覚とは異なります。...

HTML の色に関する参考資料

HTML では、色は 2 つの方法で表現されます。 1 つは、青の場合は blue のように色の名前...

Vue+video.jsはビデオプレイリストを実装します

この記事では、ビデオプレイリストを実装するためのvue + video.jsの具体的なコードを参考ま...

MySQL 5.7.18 バージョンの無料インストール構成チュートリアル

MySQLはインストール版と無料インストール版に分かれていますインストール版の拡張子はmsi、無料イ...

HTMLフォーム要素の詳しい解説(パート2)

HTML 入力属性値属性value 属性は、入力フィールドの初期値を指定します。 <フォーム...

Ubuntu 16.04 サーバーで MySQL を設定し、リモート接続を有効にする方法

背景最近、Node.js を勉強しているのですが、クラウド サーバーがあることを思い出しました。しか...

CSS: 訪問した疑似クラスセレクタの秘密の記憶

昨日、a:visited を使用して「Guess You Like」の右側にある訪問済みテキストの色...

LinuxにVSCodeをダウンロードしてインストールし、プログラミングを使用して現在の時刻を出力する

rpmコマンドがソフトウェアのインストールに使用するパラメータはどれですか: -i rpm コマンド...

JSは10進数を16進数に変換するサンプルコードを実装します

序文コードを書くと、時々基数変換の問題に遭遇します。一般的な変換には、2進数、8進数、10進数、16...

Bootstrap Webページレイアウトグリッドの実装

目次1. Bootstrapグリッドシステムの仕組み1.1 12グリッドシステム1.2 Bootst...

MySQLはランダムに一定数のレコードを抽出します

以前は、このような使用シナリオを処理するために rand() で直接 order していましたが、効...

Docker を使用して OpenLDAP+phpLDAPadmin 統合ユーザー認証を構築する方法

1. 背景LDAP を使用して、操作および保守に関連するユーザー名とパスワードを集中管理します。 1...

Docker を使用した ElasticSearch:7.8.0 クラスターのインストールに関する詳細なチュートリアル

ElasticSearch クラスターは、クラスターを構築するための動態請求的方式と靜態配置文件をサ...

Vue+Element UI でサマリーポップアップウィンドウを実装するプロセス全体

シナリオ: 検査文書には n 個の検査詳細があり、検査詳細には n 個の検査項目があります。実装効果...