• 技术文章 >web前端 >前端问答

    html5支持flv文件吗

    WBOYWBOY2022-09-06 16:11:27原创189

    html5不支持flv格式的文件;video标签原生是不支持flv格式文件的,但是可以通过安装相关的插件来进行支持,flv是“FLASH VIDEO”的简称,FLV流媒体格式是随着“Flash MX”的推出发展而来的视频格式。

    大前端成长进阶课程:进入学习

    本教程操作环境:windows10系统、HTML5版本、Dell G3电脑。

    html5支持flv文件吗

    HTML5的video标签原生是不支持flv格式文件的,但是可以安装相关插件来进行支持。FLV 是FLASH VIDEO的简称,FLV流媒体格式是随着Flash MX的推出发展而来的视频格式。由于它形成的文件极小、加载速度极快。

    目前主流浏览器不能直接嵌入并且播放FLV文件,所以直接用video标签播放是行不通的。

    因此提供两种解析方法

    这里推荐dplayer——http://dplayer.js.org/zh/guide.html#flv(亲测同样好用)

    github地址:https://github.com/bilibili/flv.js

    flv.js是支持在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库。使用 ES6 编写的,如果低版本兼容需要通过 Babel编译一下

    这里仅展示实现demo

    安装

    npm install --save flv.js

    元素

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

    代码

    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();
          }
        }
    }

    效果

    16.png

    (学习视频分享:css视频教程html视频教程

    以上就是html5支持flv文件吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html5
    上一篇:jquery class选择器怎么用 下一篇:css 3d中的z轴指什么
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• vue属于html5吗• mp3格式不是html5支持的音频格式• html5中px和em的区别是什么• html5中marquee标签怎么用• HTML5里什么是导航标签
    1/1

    PHP中文网