web-dev-qa-db-ja.com

HTMLでFLVを再生する

私のHTMLページからflvを再生する方法を簡潔に説明できますか?

15
neeep

Video.jsを使用すると、非常に簡単です。あなたがする必要があるのは、jsとcssをheadに含めて、次にhtml5コードを次のように使用することです:

<head>
    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
    <video id="video1" class="video-js vjs-default-skin" width="640" height="480"
        data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>
        <source src="video1.flv" type="video/x-flv">
    </video>
</body>

詳細: http://videojs.com/ 実際、flvファイルの再生について指定された情報は見つかりませんでした。しかし、それは正常に動作します。 :)

Video.jsを使用して他のビデオ形式を使用できます。変更する必要があるのは、次のように入力するだけです...

<source src="..." type="video/mp4">

さらに、お使いのブラウザに問題がある可能性があります。ブラウザは.mp4形式をサポートしていますか。Chromeで.mp4を再生できませんでしたが、Firefoxでは正常に動作します。さまざまな形式の同じ動画のソースをさらに追加してみてください。お気に入り...

<source src="video1.mp4" type="video/mp4">
<source src="video1.ogg" type="video/ogg">
<source src="video1.webm" type="video/webm">
31
thegauraw

Flowplayer のように、Flashプレーヤーをラップします。現在、他に方法はありません。ブラウザは、FLVを単独でレンダリングすることはできません。

Flowplayerのインストールガイド を参照して、ビデオを直接HTMLに配置する方法を段階的に説明します。

6
Matchu

あなたは試すことができます https://github.com/Bilibili/flv.js

Flv.jsを使用すると、以下が得られます。

  • 純粋なHTML5 + flvビデオ用のJavaScriptビデオプレーヤー
  • 純粋なHTML5 + JavaScript LiveStream Player for http-flvストリーム
  • 完璧な体験
  • H.264ビデオよりも小さいサイズ

Flv.jsはMSE(Media Source Extensions)を利用しているため、Chrome 43+、Firefoxでのみ利用可能ですが、Apple/iOS Safariでは利用できません。

Flv.jsは瞬時にflvストリームをH.264ストリームにトランスマックスし、H.264ストリームをMedia Source Extensionsにプッシュします。これは、blob URLを含むHTML要素のビデオタグとして表示されます。

1
Zhongrui Chen

ShadowboxもFLVファイルを再生できると確信しています: http://www.shadowbox-js.com/

クリーンで、最小限で、セットアップもかなり簡単です。

1
rectangular

もう1つの本当に人気のあるFlashプレーヤーはJWプレーヤー( http://www.longtailvideo.com/ )です。彼らはあなたが必要なコードを生成する素敵なセットアップウィザードを持っています。

0
Frederick