Tutorial :play flv in html



Question:

Can anyone give a concise instruction on how I can have a flv play from my html page please?


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.


Solution:5

Another really popular Flash player is the JW Player, at http://www.longtailvideo.com/ . They have a nice setup wizard that generates the code you need.


Solution:6

Insert an SWF object into your HTML and assign the FLV in the attributes as the video that will play.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »