首页 > 其他分享 >Vue 中使用 flv.js 播放视频

Vue 中使用 flv.js 播放视频

时间:2024-04-01 16:02:18浏览次数:12  
标签:Vue url flvPlayer js flv videoElement flvjs

引入依赖

npm install --save flv.js
<template>
    <div>
        <video autoplay controls width="100%" height="500" id="videoElement"></video>
    </div>
</template>

<script>
    import flvjs from 'flv.js'

    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        mounted() {
            this.$nextTick(() => {
                this.createVideo()
            })
        },
        methods: {
            createVideo() {
                if (flvjs.isSupported()) {
                    var videoElement = document.getElementById('videoElement');
                    var flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        url: 'url' //你的url地址
                    });
                    flvPlayer.attachMediaElement(videoElement);
                    flvPlayer.load();
                    flvPlayer.play();
                }
            }
        }
    }
</script>

 

标签:Vue,url,flvPlayer,js,flv,videoElement,flvjs
From: https://www.cnblogs.com/ZhuMeng-Chao/p/18108636

相关文章

  • Node.js中什么是RPC通信?和Ajax有啥区别?
    什么是RPC通信先导语对于后端人员来说,RPC通信是一个很熟悉的也很容易理解的东西,但是对于像我这样的前端人员来讲,对RPC就比较陌生,理解起来也相对困难一点了。对于这个问题,我们今天来尝试下,站在前端的角度来理解下RPC通信。【推荐学习:《nodejs教程》】RPC和AjaxRPC和Ajax是很相......
  • 基于ssm网上医院预约挂号系统+jsp论文
    摘要如今的信息时代,对信息的共享性,信息的流通性有着较高要求,因此传统管理方式就不适合。为了让医院预约挂号信息的管理模式进行升级,也为了更好的维护医院预约挂号信息,网上医院预约挂号系统的开发运用就显得很有必要。并且通过开发网上医院预约挂号系统,不仅可以让所学的SSM......
  • vue2生命周期
    什么是声明周期?生命周期概念是借鉴了软件工程和编程中普遍存在的概念,描述一个实体从开始到结束的整个过程。与植物学的生命周期相似。Vue的生命周期概念可以看作是对生物学生命周期概念的一种抽象借鉴和应用。生命周期阶段Vue实例有一个完整的生命周期,即从创建到销毁的过程......
  • Vue学习笔记69--activated + deactivated
    activated+deactivated注:生命周期学习可参考学习笔记33两个新的生命周期钩子作用:路由组件所独有的两个构造,用于捕获路由组件的激活状态具体名称:activated--路由组件被激活时触发+deactivated--路由组件失活时触发 示例如下所示:1<template>2<div>3<......
  • vue中路由跳转 切换tab页需要保存之前操作怎么办
    如图所示我需要草稿和新建流程页面切换草稿页面之前的操作(比如填写页面比如查询后页面等)仍保留使用vue中的keepalive组件 而对于若依系统菜单管理中自带是否缓存但注意一定要填写组件名称组件名称定义地址:......
  • vue 自定义tabs 样式的组件
    大家应该都用过tabs不同状态显示不同的列表 这种东西其实可以自己封装的其实是很简单的做一个这样简单的筛选组件 这样的跟tabs的效果一样上代码<template><divclass="switch-container"><divclass="box"><divclass="box-item"......
  • 使用jstack查看当前进程全部线程的状态
     1.使用jps命令找到进程的PID$jps225648Jps5268127284Launcher226980Launcher227624ConcurrencyTest2.使用jstack命令dump出线程信息jstack227624>./thread.dump 3.分析线程的状态信息$grepjava.lang.Thread.Statethread.dump|awk'{print$2$3$4$5}'|uniq......
  • vue3中任意嵌套组件传参,provide与inject
    一般父组件向子组件传值,可以通过props (defineProps).但是多级嵌套组件使用props过于麻烦,推荐可以透传的provide和inject provide提供数据   inject注入数据App.vue代码<scriptsetup>import{ref,provide}from'vue'importSonfrom"./son.vue";constgreet......
  • 【Vue3】readonly和shallowReadonly
    readonly()​接受一个对象(不论是响应式还是普通的)或是一个ref,返回一个原值的只读代理。类型functionreadonly<Textendsobject>(target:T):DeepReadonly<UnwrapNestedRefs<T>>只读代理是深层的:对任何嵌套属性的访问都将是只读的。它的ref解包行为与r......
  • 【Vue3】toRaw和markRow
    toRaw作用用于获取一个响应式对象的原始对象,toRaw返回的对象不再是响应式的,不会触发视图更新。toRaw()可以返回由reactive()、readonly()、shallowReactive()或者shallowReadonly()创建的代理对应的原始对象。注意:这是一个可以用于临时读取而不引起代理访问/跟踪开......