在vue中使用video.js实现视频播放

学习笔记

这里是官方关于在vue中如何使用的文档，下面的只是基于官方文档的基础用法，详细内容建议查看官方文档！ 官方文档
以此为例
先看效果：

大致步骤如下：
一、安装video.js

npm install --save video.js

二、参考官方文档操作
这里定义一个名为VideoJs的组件，便于使用。
注意要引入下面的video-js.css和video.js！！，一个是样式，一个是播放器。

<template><div><video ref="videoPlayer" class="video-js"></video></div>
</template><script>
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
export default {name: "VideoJs",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><style scoped></style>

在页面中使用该组件：样式使用了element ui，需要的可以自行安装
主要的是data中的videoOptions，与组件绑定。

<template><div class="background"><div><el-row><el-col :span="20" :offset="2" class="welcome-row"><span class="welcome">Welcome to my Blog</span></el-col></el-row><el-row><el-col :span="10" :offset="7"><div class="video-box"><div class="video"><!--这里即是引用的组件，外层css可以修饰播放器的样式--><video-js :options="videoOptions" class="video-css"/></div></div></el-col></el-row></div></div>
</template><script>
import VideoJs from '@/components/Main/VideoJs';
import 'video.js/dist/video-js.css';
export default {name: "PageOne",components: {VideoJs,},data(){return{videoOptions: {controls: true,//开启交互，即是用户可控。muted: true,//开启视频时是否静音fluid: true,//根据外层css样式大小，自动填充宽高！比较实用，可搭配响应式reload: "auto",//重载//其余设置根据需求添加！poster: require('@/assets/images/海贼王.jpg'),//视频封面sources: [//视频播放源，建议本地{src: require('@/assets/videos/海贼王.mp4'),type: "video/mp4"}]}}},created() {},methods: {},}
</script><style scoped>.background{background: linear-gradient(to right, #c2e59c, #64b3f4);width: 100%;height: calc(100vh - 57px);}.welcome-row{width: 100%;text-align: center;margin-top: 36px;}.welcome{color: white;font-size: 64px;font-weight: 600;font-family: helveticaneuew01-75bold,sans-serif;}.video-box{width: 100%;min-width: 456px;height: 100%;border-radius: 20px;background-color: rgba(255,255,255,1);box-shadow: 0 2px 4px rgba(255,255,255,0.8);display: flex;align-items: center;justify-content: center;margin-top: 24px;}.video{width: 92%;}.video-css{width: 100%;height: 100%;}
</style>

Talk is cheap, show me the code !—— 薪火工作室！

在vue中使用video.js实现视频播放相关推荐

在vue项目中使用video.js实现视频播放和视频进度条打点
一.用video.js实现视频播放 1.安装video.js插件 // 安装video.js插件 npm install video.js -S // 如果需要播放rtmp直播流,需安装一下插件 np ...
vue中使用video.js 播放m3u8直播流
需求描述支持播放m3u8直播流 + 录屏视频:同时可以动态更改视频直播地址,新增,删除视频. 实现效果实现代码安装依赖 npm install video.js --save // 视频播放器 ...
Vue中引入Video.js视频播放器
安装 $ npm install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css ...
Vue中使用Video.js视频播放器
Video.js是一个有着HTML5背景的网络视频播放器.它同时支持HTM5和Flash视频,简单来说就是HTMl5 和 Flash 视频播放器安装: npm install video.js ma ...
dplayer js控制自动全屏_vue 中使用video.js 实现m3u8视频播放格式
官方文档:https://docs.videojs.com/tutorial-vue.html H5 的 video 标签不支持m3u8视频播放,所以借助于 video.js 1.video 定义与用 ...
springboot + vue3实现视频播放Demo（video.js Vue3-video-play视频播放器）
文章目录学习链接前言 ffmpeg 安装ffmpeg 配置环境变量分割视频文件后台配置 WebConfig 前端代码 video.js示例安装依赖视频播放组件效果 Vue3-video- ...
vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
vue中解决three.js出现内存泄漏丢失上下文问题
vue中解决three.js出现内存泄漏丢失上下文问题参考文章: (1)vue中解决three.js出现内存泄漏丢失上下文问题 (2)https://www.cnblogs.com/lichuank ...

在vue中使用video.js实现视频播放

在vue中使用video.js实现视频播放相关推荐

最新文章

热门文章