Vue使用video.js的代码详解

一、下载video.js

npm install --save-dev video.js

二、在vue脚手架中引入video.js(main.js引入)

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video //引入Video播放器

三、实例化了视频.js播放器，并在 上销毁了它

<template>
    <div>
        <video ref="videoPlayer" class="video-js"></video>
    </div>
</template>

<script>
import videojs from 'video.js';
//不要忘记包括视频.js CSS，位于 .<code>video.js/dist/video-js.css</code>

export default {
    name: "VideoPlayer",
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            player: null
        }
    },
    mounted() {
        this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
            console.log('onPlayerReady', this);
        })
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    }
}
</script>

三、组件使用video.js

<template>
  <div>
        <video-player :options="videoOptions"/>
    </div>
</template>

<script>
import VideoPlayer from "@/components/VideoPlayer.vue";

export default {
    name: "VideoExample",
    components: {
        VideoPlayer
    },
    data() {
        return {
            videoOptions: {
                autoplay: true,
                controls: true,
                sources: [
                    {
                        src:
                            "/path/to/video.mp4",
                          type: "video/mp4"
                    }
                ]
            }
        };
    }
};

到此这篇关于Vue使用video.js的代码详解的文章就介绍到这了,更多相关vue使用video.js内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 如何在vue中使用video.js播放m3u8格式的视频

    如何在vue中使用video.js播放m3u8格式的视频

    @[toc] 注意: "vue": "^2.6.11", "video.js": "^7.10.2", "videojs-contrib-hls": "^5.15.0", "mux.js": "^5.7.0" 一.安装 yarn add video.js yarn add videojs-contrib-hls // 这是播放hls流需要的插件 y

  • vue+video.js实现视频播放列表

    本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 1.引入Video.js npm install --save-dev video.js 然后在main.js中引用 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$videos = Video 引用完成后我们就可以做视频列表了 2.在页面中 使用 method中定义初始方法 init

  • Vue使用video.js的代码详解

    一.下载video.js npm install --save-dev video.js 二.在vue脚手架中引入video.js(main.js引入) import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video //引入Video播放器 三.实例化了视频.js播放器,并在 上销毁了它 <template> <div> <video ref=&quo

  • Vue创建头部组件示例代码详解

    Vue.js 组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title

  • vue中的过滤器实例代码详解

    过滤器 1.过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和  v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScript 表达式的尾部,由"管道"符号指示: <!-- 在双花括号中 --> {{ name | Upper }} <!-- 在 `v-bind` 中 --> <div v-bind:id="martin | Upper

  • Vue中使用vux配置代码详解

    一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my-project // 创建名为 my-project 的模板 cd my-project // 进入项目 npm install --registry=https://registry.npm.taobao.org // 开始安装 npm run dev // 运行项目 二.想在已创建的Vue工程里引入vux组件 <1>. 在项目里安装

  • 封装一下vue中的axios示例代码详解

    在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御cSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库.如果还对axios不了解的,可以移步axios文档. 安装 npm install axios; // 安装axios 好了,下面开始今天的正文. 此次封装用以解决: (

  • vue使用AES.js的步骤详解

    vue使用AES.js的步骤详解

    AES加密的使用 对数据传输加密.解密处理---AES.js 第一步: 在vue中安装crypto-js依赖 npm install crypto-js --save-dev 第二步: 在static目录下新建一个AES.js文件,例如: 第三步: 在AES.js中填写如下代码 import CryptoJS from "crypto-js"; // npm install crypto-js --save-dev //随机生成指定数量的32进制key export default {

  • vue通信方式EventBus的实现代码详解

    vue通信方式有很多,项目中用的比较多的的有 pros.vuex.$emit/$on 这3种,还有 provide/inject (适合高阶组件). $attrs和$listeners (适合高阶组件)以及 $parent/$child/ref.eventBus 等这3种方式.很多时候我们都是只会使用api,而懂得原理以及实现,但我就觉得懂得原理以及实现跟一个只会调用api的开发人员时不在同一层次的.所以这里就像把跨组件通信的 eventBus 通信的原理给大家展示一下.这也是自己学到大佬的的东

  • vue动态注册组件实例代码详解

    写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作. 示例: <!-- 当 `currentView` 改变时,组件也跟着改变 --> <component v-bind:is="currentView"></component> 详见vue API中关于

  • Js视频播放器插件Video.js使用方法详解

    Video.js快速入门 我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本. 在页面中引用video-js.cs样式文件和video.js <link href="video-js.css" rel="external nofollow" rel="stylesheet" type="text/css"> <script src="video.js"

  • Vue数字输入框组件示例代码详解

    Vue数字输入框组件示例代码详解

    数字输入框组件 实现功能:只允许输入数字(包括小数).允许设置初始值.最大值.最小值. 为了方便,这里选用Vue的 cli-service 实现快速原型开发 首先template部分代码 <template> <div class="demo"> <input-number v-model="value" :max="10" :min="0"></input-number> &l

随机推荐