脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue flv.js播放视频

Vue中使用flv.js播放视频的示例详解

 更新时间：2024年04月22日 15:49:06   作者：江湖行骗老中医  
这篇文章主要为大家详细介绍了如何在Vue项目中使用flv.js播放视频,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

安装

npm install flv.js

组件内引入

import flvjs from '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 {
      msg: 'Welcome to Your Vue.js App',
	  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();
      }
    }
}

效果图

播放失败原因

协议不支持

在一开始我以为flvjs可以播放所有flv格式的视频流，但是经过测试和查看文档发现，这个包仅支持HTTPFLV协议的流，如果使用RTMP协议的流则依然需要使用flash插件。

支持：http://www.xxxxxxx.com:18080/11/22.flv

不支持：rtmp://www.xxxxx.com/api/6538-1.1567494734966.flv

到此这篇关于Vue中使用flv.js播放视频的示例详解的文章就介绍到这了,更多相关Vue flv.js播放视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • uniapp Vue3中如何解决web/H5网页浏览器跨域的问题

    uniapp Vue3中如何解决web/H5网页浏览器跨域的问题

    存在跨域问题的原因是因为浏览器的同源策略,也就是说前端无法直接发起跨域请求,同源策略是一个基础的安全策略,但是这也会给uniapp/Vue开发者在部署时带来一定的麻烦,这篇文章主要介绍了在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题,需要的朋友可以参考下
    2024-06-06
  • Vue全家桶入门基础教程

    Vue全家桶入门基础教程

    Vue 是一套用于构建用户界面的渐进式框架，和React，都自称自己只关注视图层，全家桶对于开发一个完整的中大型单页面应用项目所必须的所必须的插件和框架，本文给大家分享Vue全家桶入门基础教程，感兴趣的朋友一起看看吧
    2021-05-05
  • vue中的render函数、h()函数、函数式组件详解

    vue中的render函数、h()函数、函数式组件详解

    在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM，这篇文章主要介绍了vue中的render函数、h（）函数、函数式组件,需要的朋友可以参考下
    2023-02-02
  • 在vue中实现简单页面逆传值的方法

    在vue中实现简单页面逆传值的方法

    vue是一个单页应用，轻量，并且不会重复下载数据。当它从一个页面跳转到另一个页面时，原来的页面的vue实例和相关数据已经销毁了，要实现逆传值就要找到操作的对象及它的一些属性
    2017-11-11
  • vue+iview使用树形控件的具体使用

    vue+iview使用树形控件的具体使用

    这篇文章主要介绍了vue+iview使用树形控件的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Vue中消息横向滚动时setInterval清不掉的问题及解决方法

    Vue中消息横向滚动时setInterval清不掉的问题及解决方法

    最近在做项目时,需要进行两个组件联动,一个轮询获取到消息,然后将其传递给另外一个组件进行横向滚动展示,结果滚动的速度越来越快。接下来通过本文给大家分享Vue中消息横向滚动时setInterval清不掉的问题及解决方法，感兴趣的朋友一起看看吧
    2019-08-08
  • 一文解决vue2 element el-table自适应高度问题

    一文解决vue2 element el-table自适应高度问题

    在写公司后台项目的时候遇到一个需求,要求表格页面不能有滚动条,所以必须封装一个公共方法来实现表格自适应高度,本问小编给大家介绍了如何解决vue2 element el-table自适应高度问题,需要的朋友可以参考下
    2023-11-11
  • Vue + Webpack + Vue-loader学习教程之相关配置篇

    Vue + Webpack + Vue-loader学习教程之相关配置篇

    这篇文章主要介绍了关于Vue + Webpack + Vue-loader的相关配置篇，文中通过示例代码介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
    2017-03-03
  • 第一次接触神奇的前端框架vue.js

    第一次接触神奇的前端框架vue.js

    第一次接触神奇的vue.js，主要了解一下v-model、v-if、v-else、v-show、v-for等，感兴趣的小伙伴们可以一起学习一下
    2016-12-12
  • vue 使用 echarts 绘制中国地图的实现代码

    vue 使用 echarts 绘制中国地图的实现代码

    这篇文章主要介绍了vue 使用 echarts 绘制中国地图,内容包括插入echarts所需模块及完整的代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-01-01

最新评论