vue结合videojs实现视频播放组件

简介

业务需求，视频播放组件往往结合视频上传组件一块使用。

视频上传组件

主要依赖说明（先安装，步骤略）

 {"element-ui": "2.11.1",  "vue": "^2.6.10","vue-router": "^3.0.1","vue-video-player": "^5.0.2"}

正文

1.组件

src/components/VideoPlayer/index.vue

<template><div :id="videoId" class="video-js-player-container" allowfullscreen><video-playerplaysinlineoncontextmenu="return false;":options="playerOptions"class="vjs-big-play-centered"@canplay="canplay"/></div>
</template><script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
window.videojs = videojs;
const zhCN = require("video.js/dist/lang/zh-CN.js");
export default {name:"VideoPlayer",components: {videoPlayer},props: {// 视频地址src: {required: true,default: ""},// 是否自动播放autoplay: {type: Boolean,default: false},loop: {type: Boolean,default: true},// 视频海报poster: {type: String,default: ""},// 视频高度height: {type: Number,default: 9 * 50},// 视频宽度width: {type: Number,default: 16 * 50}},data() {return {video: "",videoId: "videojs-" + +new Date(),playerOptions: {languages: zhCN,preload: "auto",fluid: true,sources: [{src: ""}],loop: this.loop,autoplay: this.autoplay,poster: this.poster,height: this.height,width: this.width}};},watch: {src(val) {if (val) {this.playerOptions.sources[0].src = val;}}},mounted() {// 分发时长this.video = document.querySelector(`#${this.videoId} .vjs-tech`);this.video.oncanplay = e => {this.$emit("subVideoDuration", e.target.duration);};},methods: {canplay(e) {const duration = e.el_.children[0].duration;console.log(duration);this.$emit("subVideoDuration", duration);}}
};
</script>
<style lang='scss'>
.video-js-player-container {border: 1px solid #ccc;.video-js .vjs-big-play-button {font-size: 2.5em;line-height: 2.3em;height: 2.5em;width: 2.5em;-webkit-border-radius: 2.5em;-moz-border-radius: 2.5em;border-radius: 2.5em;background-color: #73859f;background-color: rgba(115, 133, 159, 0.5);border-width: 0.15em;margin-top: -1.25em;margin-left: -1.75em;}/* 中间的播放箭头 */.vjs-big-play-button .vjs-icon-placeholder {font-size: 1.63em;}/* 加载圆圈 */.vjs-loading-spinner {font-size: 2.5em;width: 2em;height: 2em;border-radius: 1em;margin-top: -1em;margin-left: -1.5em;}.video-js.vjs-playing .vjs-tech {pointer-events: auto;}.video-js .vjs-time-control {display: block;}.video-js .vjs-remaining-time {display: none;}.vjs-button > .vjs-icon-placeholder:before {font-size: 1.8em;line-height: 2.12;}.vjs-paused .vjs-big-play-button,.vjs-paused.vjs-has-started .vjs-big-play-button {display: block;}// 禁止右键video::-webkit-media-controls-enclosure {overflow: hidden;}video::-webkit-media-controls-panel {width: calc(100% + 30px);}.vjs-poster {background-size: cover;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}.video-js .vjs-play-progress {background-color: #d2bbad;}
}
</style>

2.使用

<template> <div><video-player :src="url" @subVideoDuration="subVideoDuration"></video-player></div>
</template><script>
import VideoPlayer from '@/components/VideoPlayer'
export default {name: 'GoodsForm',components: {VideoPlayer},data() {return {url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'}},methods: {// 视频时长subVideoDuration(duration) {console.log(duration)}}
}
</script>

3.使用效果

vue结合videojs实现视频播放组件相关推荐

Vue视频播放组件（Video）
可自定义设置以下属性: 视频文件url(videoUrl),必传视频封面url(videoCover),默认为null 视频播放器宽度(width),默认为800px 视频播放器高度(height) ...
vue视频播放组件vue-mini-player
vue-mini-player 官方文档:vue-mini-player: 基于Vue的一个轻量级HTML5视频播放组件,适配PC和移动端
超精致 Vue 视频播放组件Vue-CoreVideoPlayer
https://www.toutiao.com/i6846961652387021320/?group_id=6846961652387021320&wid=1625119721154 今天给 ...
【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）...
Vue 资源典藏,包括:UI组件开发框架服务端辅助工具应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
vue-dplayer 视频播放组件介绍
目录前言安装使用 1. main.js中全局引入 2. vue 页面引入 3. 属性配置前言年后开工第一帖,新的一年更要加油鸭~ 最近在整理视频播放组件的资料,发现dplayer组件,除了完 ...
vue实现视频流播放 vue-video-player组件
vue-video-player组件因为要在页面显示监控实时情况,所以百度了一下,最后发现了GitHub上的一个开源项目vue-video-player的组件 1.安装vue-vide-player ...
Vue3VideoPlay+vue3+ts封装一个视频播放组件
vue3+ts封装一个视频播放组件基于Vue3VideoPlay 做了常用的配置,复制即用! 官方文档https://codelife.cc/vue3-video-play/ 安装 npm安装: n ...
Vue多个单文件组件使用
在project目录下创建components文件夹,然后将所有子组件放入components文件夹下 [创建此目录][文件名的首字母大写] 1.多组件嵌套使用 Child1.vue <tem ...
用vue优雅地编写UI组件的几条指导原则
前言最近在尝试写几个UI组件,并通过阅读element-ui的源码,与其反复比较,然后认真思考,最后总结出一些自己的一些心得和体会.在造轮子的过程中,既巩固了html,css,js基础,又加深了对v ...
iView 3.3.0 发布，基于 Vue.js 的企业级 UI 组件库
iView 3.3.0 发布了,代号 Transistor ,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品. 本次更新如下: https://www ...

vue结合videojs实现视频播放组件

vue结合videojs实现视频播放组件

简介

主要依赖说明（先安装，步骤略）

正文

vue结合videojs实现视频播放组件相关推荐

最新文章

热门文章

vue结合videojs实现视频播放组件

vue结合videojs实现视频播放组件

简介

主要依赖说明 （先安装，步骤略）

正文

vue结合videojs实现视频播放组件相关推荐

最新文章

热门文章

主要依赖说明（先安装，步骤略）