play flv in html

html flv

84,535

Solution 1

With video.js its very easy. All you need to do is include js & css in head & then use html5 code as:

<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>

For further details: http://videojs.com/ Actually, I did not find information specified about playing flv files. But it works fine. :)

You can use other video formats using video.js all you need to change is type as...

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

Moreover, there might some issue regarding your browser, does your browser support the .mp4 format, I could not play .mp4 in chrome, but it works fine in firefox. Try adding more sources with same video in different formats. Like...

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

Solution 2

Wrap a flash player around it, such as Flowplayer. There currently is no other way; browsers can't just render an FLV by itself.

See the installation guide for Flowplayer, taking you step-by-step on how to place the video directly into your HTML.

Solution 3

I'm fairly certain that shadowbox can also play FLV files: http://www.shadowbox-js.com/

It's clean, minimal and fairly simple to setup.

Solution 4

You can try https://github.com/Bilibili/flv.js

With flv.js, You'll get:

Pure HTML5 + JavaScript Video Player for flv videos
Pure HTML5 + JavaScript LiveStream Player for http-flv streams
Flawless experience
Smaller size than H.264 Videos

Flv.js utilizes MSE (Media Source Extensions) therefore it'll only be available on Chrome 43+, Firefox but not Apple / iOS Safari.

Flv.js instantaneously transmuxes flv streams to H.264 streams and then push the H.264 stream to Media Source Extensions. It'll display as a video tag in HTML Element with a blob URL.

View more solutions

84,535