vue利用videojs-player实现视频播放

前言：之前插入视频我一直想要使用的是网上比较火的vue-video-player，但是出现了找不到

'vue-video-player/src/custom-theme.css'

等问题，以及视频组件串位等问题，也有可能是vue3兼容性的问题，因此，后来采用了这个videojs-player。

流程：首先下载对应的包

npm install video.js @videojs-player/vue --save

然后去官网可以找到自己想要实现的案例效果所对应的代码并使用到自己的项目中来。

videojs-player | Homepage (surmon.me)

可能需要稍作修改，如没有scss，可以去除style标签上对应的lang；去除script上的lang并删掉ts相关的代码或用不到的方法等等。

可以拿我这里改过的实例代码试一试↓

<template><video-playerclass="video-player vjs-big-play-centered"src="https://vjs.zencdn.net/v/oceans.mp4"poster="https://vjs.zencdn.net/v/oceans.png"crossorigin="anonymous"playsinlinecontrols:volume="0.6"        :height="320"        :playback-rates="[0.7, 1.0, 1.5, 2.0]"        @mounted="handleMounted"@ready="handleEvent($event)"@play="handleEvent($event)"@pause="handleEvent($event)"@ended="handleEvent($event)"@loadeddata="handleEvent($event)"@waiting="handleEvent($event)"@playing="handleEvent($event)"@canplay="handleEvent($event)"@canplaythrough="handleEvent($event)"@timeupdate="handleEvent(player?.currentTime())"/>
</template><script>import { defineComponent, shallowRef } from 'vue'import { VideoJsPlayer } from 'video.js'import { VideoPlayer } from '@videojs-player/vue'import 'video.js/dist/video-js.css'export default {name: 'vue-basic-player-example',title: 'Basic player (Vue)',components: {VideoPlayer},setup() {//可打印出当前所触发的事件const handleEvent = (log) => {console.log('Basic player event', log)}return { handleEvent }}}
</script><style scoped>.video-player {background-color: black;width: 100%;}
</style>

可以看到页面实现了对应的效果，基本的播放功能可以实现：

使用本地文件也是可以的，如require('@/assets/video/test.mp4')，不同项目路径可能会有些许差别。

附加：弹窗关闭视频依旧运行的问题

可以实现在弹窗中播放视频的效果，但是会出现弹窗关闭视频依旧运行的问题。页面虽然关掉了，依旧在播放，可听到声音。

解决方案：可以使用v-if，根据当前弹窗框的显示状态决定video-player是否存在即可实现。

如下例中，通过dialogVisible决定。

<video-player v-if="dialogVisible" class="video-player vjs-big-play-centered" :src="totalsrc"poster="https://vjs.zencdn.net/v/oceans.png" crossorigin="anonymous" playsinline controls :volume="0.6"height="500%" :playback-rates="[0.7, 1.0, 1.5, 2.0]"@mounted="handleMounted"@ready="handleEvent($event)"@play="handleEvent($event)"@pause="handleEvent($event)"@ended="handleEvent($event)"@loadeddata="handleEvent($event)"@waiting="handleEvent($event)"@playing="handleEvent($event)"@canplay="handleEvent($event)"@canplaythrough="handleEvent($event)"@timeupdate="handleEvent(player?.currentTime())"/>

希望本文会对您有所帮助^_^

vue利用videojs-player实现视频播放相关推荐

91.video.ws index php_如何利用videojs实现视频列表循环播放（完整代码）
本篇文章给大家带来的内容是关于如何利用videojs实现视频列表循环播放(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 庭审直播 .video-js { /* posit ...
ffmpeg php 快速播放,怎么在PHP中利用FFmpeg函数对视频播放的时长进行获取
怎么在PHP中利用FFmpeg函数对视频播放的时长进行获取发布时间:2020-12-18 16:02:20 来源:亿速云阅读:96 作者:Leah 这篇文章给大家介绍怎么在PHP中利用FFmpeg ...
vue利用 vue-animate-number插件动态展示数字（从0动态滚动到指定数字）
vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字) 第一步:安装vue-animate-number插件 $ npm install vue-animate-n ...
ant design vue利用rowClassName给table添加行样式
ant design vue利用rowClassName给table添加行样式目录 1. 需求:表格每行数据hasVerdict值不为'1'时标红显示 2. 实现方式:table属性rowClass ...
VUE利用transition标签实现摇一摇抽签效果
VUE利用transition标签监听animation动画执行完毕,触发之后的操作 transition标签文档实现效果在线试一试欢迎各位大佬进群交流
Android Video Player. 安卓视频播放器，封装 MediaPlayer、ExoPlayer、IjkPlayer。模仿抖音，悬浮播放，广告播放，列表播放，弹幕
DKVideoPlayer 项目地址:dueeeke/DKVideoPlayer 简介: Android Video Player. 安卓视频播放器,封装 MediaPlayer.ExoPlayer. ...
Vue利用Canvas实现逐帧播放图片不闪烁(Vue解决逐帧播放图片闪烁问题)
Vue利用Canvas实现逐帧播放图片不闪烁前言 Vue代码实现实现效果前言 Vue采用<el-image :src="src"></el-image> ...
前端vue利用flexpaper实现在线预览
前端vue利用flexpaper实现在线预览下载flexpaper 只需要用到js文件和FlexPaperViewer.swf: flexpaper_flash_debug.js flexpaper ...
Vue 使用 video 标签实现视频播放
写在前面我们在做项目时常常会碰到要做在页面播放视频的功能,该功能我们可以用video.js来做关于video.js video.js是一个拥有h5背景的网络视频播放器,同时支持h5以及Flash视 ...

vue利用videojs-player实现视频播放

vue利用videojs-player实现视频播放相关推荐

最新文章

热门文章