vue-video-player通过自定义按钮组件实现全屏切换效果【推荐】_视频播放进度条

vue

126 浏览量更新于2023-03-16 评论 2 收藏 59KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

vue-video-player 通过自定义按钮组件实现全屏切换效果【推通过自定义按钮组件实现全屏切换效果【推

荐】荐】

主要介绍了vue-video-player,通过自定义按钮组件实现全屏切换效果,非常不错，具有一定的参考借鉴价值，需

要的朋友可以参考下

最近公司的产品上线，一些高级功能在基础版本中不对用户开发，通过视频的形式展示。

产品开发用的是 vue, 经同事介绍使用了vue-video-player 视频播放插件，通过 demo 案例很快实现了视频播放效果

<video-player

class="vjs-custom-skin"

ref="videoPlayer1"

:options="playerOptions"

:playsinline="true"

:events="events"

@play="onPlayerPlay($event)"

@pause="onPlayerPause($event)"

@ended="onPlayerEnded($event)"

@loadeddata="onPlayerLoadeddata($event)"

@waiting="onPlayerWaiting($event)"

@playing="onPlayerPlaying($event)"

@timeupdate="onPlayerTimeupdate($event)"

@canplay="onPlayerCanplay($event)"

@canplaythrough="onPlayerCanplaythrough($event)"

@ready="playerReadied"

@statechanged="playerStateChanged($event)">

</video-player>

老板看了之后说: '不需要全屏切换,不需要让用户看的那么仔细',

通过配置项 controlBar: {fullscreenToggle: false}, 关闭全屏切换后，由于视频标清、展示区域大小 483px X 303px,根本看不清视频里

内容，老板又说："实现全屏不铺满整个屏幕，而是通过固定大小的弹出层展示"

首先想到的是：开启全屏切换，监听全屏切换的事件，在事件中强制退出全屏，显示固定大小的弹出层

<video-player

...

:events="events"

@fullscreenchange="onPlayerFullScreenchange($event)"

...

</video-player>

// 需要在 events 中指定全屏切换事件，不然无法监听

data () {

return {

videoDialogVisible: false, // 控制弹出层

events: ['fullscreenchange']

}

methods: {

...

onPlayerFullScreenchange (player) {

player.exitFullscreen() //强制退出全屏，恢复正常大小

this.videoDialogVisible = true

}

...

}

这种办法，虽然能实现，但在强制退出全屏那一下，整个页面会跳一下，碰到网速慢，或电脑卡的情况，效果更差...

没办法，继续想办法，在该插件 GitHub 库中，有网友提过相关 issues , 通过注册一个自定义按钮组件，添加到播放器的

controlBar中,替换默认的全屏切换按钮

import * as videojs from 'video.js'

export default {

...

methods: {

...

createMyButton () {

let Button = videojs.getComponent('Button')

let myButton = videojs.extend(Button, {

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38742460

粉丝: 19
资源: 912

会员权益专享

vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

评论0

会员权益专享

最新资源

vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

评论0

vue-douyin：基于Vue.js的模仿抖音的Web App

vue项目中自定义video视频控制条的实现代码

vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

vue3使用vue-video-player

vue-video-player使用

vue-video-player使用教程

vue-video-player怎么使用

vue-video-player 如何实现全屏

vue2 vue-video-player

vue3.0 使用vue-video-player

vue-video-player和video.js区别

vue-video-player 文档

设置vue-video-player平铺父容器

vue-core-video-player

vue-video-player 全屏失效

vue使用video-player

vue-core-video-player是否支持手机横屏

vue-video-player、

vue2项目vue-video-player插件的版本

vue-video-player实现全屏

会员权益专享

最新资源