Does html5 support flv files?

html5 does not support flv format files; the video tag does not natively support flv format files, but it can be supported by installing relevant plug-ins. flv is the abbreviation of "FLASH VIDEO", and the FLV streaming media format is A video format developed with the introduction of "Flash MX".

The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.

Does html5 support flv files?

The video tag of HTML5 does not natively support flv format files, but you can install relevant plug-ins to support it. FLV is the abbreviation of FLASH VIDEO. The FLV streaming media format is a video format developed with the launch of Flash MX. Because the files it creates are extremely small and load very quickly.

Currently, mainstream browsers cannot embed and play FLV files directly, so playing them directly using the video tag is not feasible.

There are two parsing methods provided

• Embed a swf media playback file and use the file to play your default file.

Recommend dplayer here——http://dplayer.js.org/zh/guide.html#flv (personal test is also easy to use)

• Use the open source flv.js of Bilibili to convert the FLV file stream into ISO BMFF (Fragmented MP4) segments, and then provide the mp4 segments to HTML5 elements through the Media Source Extensions API.

github address: https://github.com/bilibili/flv.js

flv.js is a JavaScript library that supports playing FLV format videos in HTML5 videos . Written in ES6, if the lower version is compatible, it needs to be compiled with Babel

Only the implementation demo

Installation

npm install --save flv.js

Element

<template>
  <div>
<video id="videoElement" controls autoplay muted width="300px" height="200px">
    </video>
<button @click="play">播放</button>
  </div>
</template>

Code

import flvjs from 'flv.js'
export default {
  data () {
    return {
  flvPlayer:null
    }
  },
   mounted() {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
  isLive: true,
  hasAudio: false,
          url: 'http://1011.hlsplay.aodianyun.com/demo/game.flv'
        });
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
this.flvPlayer.play();
      }
    },
    methods:{
      play () {
        this.flvPlayer.play();
      }
    }
}

Effect

(Learning video sharing: css video tutorial, html video tutorial）

The above is the detailed content of Does html5 support flv files?. For more information, please follow other related articles on the PHP Chinese website!