Search code examples
javascripthtmlflv

Playing a locally stored FLV file in HTML

I'm trying to make a simple html page where you can click a button and it plays a FLV file that is locally stored on my computer, but I'm not sure what I'm doing wrong. I've already managed to do a similar thing with a Youtube video as well as an MP4, but I'm having trouble getting the FLV file to play. The best I've managed to do is that when it's click it is downloaded. Here's my code:

<html>
<body>
  <video id = "video" width = "200px" height = "200px">
  </video>

  <iframe id = "YouTube" width="560" height="315" frameborder="0" allowfullscreen>
  </iframe>

  <embed id = "flash" width = "200px" height = "200px">
  </embed>

  <button id = "playVideo">Play Short Clip</button>
  <button id = "playYouTube">Play YouTube Video</button>
  <button id = "playFlash">Play Flash</button>

</body>
<script>
document.getElementById("playVideo").onclick = function playVideo() {
  document.getElementById("video").setAttribute("src", "StarContainerTunnel.mp4");
  document.getElementById("video").play();
};
document.getElementById("playYouTube").onclick = function playYouTube() {
  document.getElementById("YouTube").setAttribute("src", "https://www.youtube.com/embed/DTqa-NEwUbs");
  document.getElementById("YouTube").play();
};
document.getElementById("playFlash").onclick = function playFlash() {
  document.getElementById("flash").setAttribute("src", "barsandtone.flv");
  document.getElementById("flash").play();
};
</script>

</html>
Solution

  • Looks like this question was answered here: How to Play FLV Video in HTML Video tags?

    You can use http://videojs.com/ to achieve your goal.

    Once you get this you can use the video tag like this:

    <video id="example_video_1" class="video-js vjs-default-skin"
 controls preload="auto" width="640" height="480"
 poster="http://video-js.zencoder.com/oceans-clip.png"
 data-setup='{"example_option":true}'>
<source src="rtmp://localhost/live/test" type="rtmp/flv">
</video>