vue 播放器插件 之 vue-video-player的使用
2023-09-11 14:22:30 时间
使用
- 安装:
npm install vue-video-player --save
- 在main.js入口文件中引入
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
- 在vue中使用(全屏的效果),可更改width属性调整大小
<template>
<div>
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
></video-player>
</div>
</template>
<script>
export default {
data() {
return {
playerOptions: {
autoplay: false,
muted: false,
loop: false,
preload: "auto",
fluid: true,
sources: [
{
src:
"http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4", // 路径
type: "video/mp4" // 类型
}
],
width: document.documentElement.clientWidth,
notSupportedMessage: "此视频暂无法播放,请稍后再试",
controlBar: false
}
};
}
};
</script>
<style scoped>
</style>
- 配置项详细:
playerOptions: {
// playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources: [
{
src:
"http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4", // 路径
type: "video/mp4" // 类型
}
],
//poster: "../../static/images/test.jpg", //你的封面地址
width: document.documentElement.clientWidth,
notSupportedMessage: "此视频暂无法播放,请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: false
// controlBar: { //显示控制栏的一些配置
// timeDivider: true,
// durationDisplay: true,
// remainingTimeDisplay: false,
// fullscreenToggle: true //全屏按钮
// }
}
效果图
相关文章
- Vue_(Router路由)-vue-router路由的基本用法
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- vue.js3: 自定义video可拖动的进度条(vue@3.2.36)
- vue.js3:用el-loading显示加载动画(vue@3.2.37 / element-plus@2.2.2)
- vue.js 3.2.20: 用photoswipe实现图片的浏览:增加切换动画和自动播放(photoswipe@4.1.3)
- nginx配置部署vuejs gva(gin-vue-admin)项目并解决后端api接口请求时报404问题(附nginx.conf)
- 一个典型的Vue应用的App.vue
- vue中的el-input设置灰显不可编辑
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue脚手架(2022年9月份nodejs16.17.0版本)
- 基于Vue实现多标签选择器
- 如何在浏览器中安装使用Vue开发者工具?Vue开发者工具的安装使用?可直接提取插件安装使用
- Vue中vue-i18n结合vant-ui实现国际化
- Vue、Vuejs从入门到精通 | vue-router详解
- 223:vue+openlayers:引用插件,实现探照灯效果
- 062:vue+openlayers绘制正方形、矩形、六芒星( 代码示例 )
- vue框架中,图片应该保存在哪里?应该如何访问?
- vue+element ui+腾讯云开发打造会员管理系统之实战教程(六)类别管理
- 【三十天精通Vue 3】第十三天 Vue 3 的插件详解
- Vue:第一个vue-cli项目