添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue-video-player,通过自定义按钮组件实现全屏切换效果

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

作者:Alone1469546971808

这篇文章主要介绍了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, { constructor: function (player, options) { Button.apply(this, arguments) this.addClass('fullscreen-enter') handleClick: () => { // 绑定点击事件 buildCSSClass: function () { return 'vjs-icon-custombutton vjs-control vjs-button' videojs.registerComponent('myButton', myButton) this.$nextTick(() => { // 添加到controlBar中 this.$refs.videoPlayer1.player.getChild('controlBar').addChild('myButton') // 在 style 中指定自定义按钮样式 <style> .video-js{ .vjs-control-bar{ .vjs-icon-custombutton { font-family: VideoJS; font-weight: normal; font-style: normal; } .vjs-icon-custombutton:before { content: "\f108"; font-size: 1.8em; line-height: 1.67; </style>

自定义的按钮图标用的还是默认的 全屏图标 ,接着得实现按钮的点击事件

页面和弹出层中分别是俩个 播放器实例 videoPlayer1, videoPlayer2,需要考虑到的是:当自定义切换事件触发后,俩个播放器的同步( videoPlayer1播放了10s, 全屏切换后,videoPlayer2得从 10s 继续播放,而不是从头播放 )

onCustombuttonClick () { let _time = this.$refs.videoPlayer1.player.currentTime() //已播放时长 this.$refs.videoPlayer2.player.currentTime(_time) this.$refs.videoPlayer2.player.play()

同理:关闭弹出层后, 也得把 videoPlayer2 的播放时长 赋值给 videoPlayer1,此处是通过 监听弹出层显示、隐藏等事件来实现

以上所述是小编给大家介绍的vue-video-player 通过自定义按钮组件实现全屏切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:
  • vue如何基于el-table实现多页多选及翻页回显过程
    vue如何基于el-table实现多页多选及翻页回显过程
    2022-12-12
  • vue3 Composition API使用示例教程
    vue3 Composition API使用示例教程
    2022-12-12
  • vue-router的导航守卫使用最新讲解
    vue-router的导航守卫使用最新讲解
    2022-12-12
  • vue中this.$router.push()路由传值和获取的两种常见方法汇总
    vue中this.$router.push()路由传值和获取的两种常见方法汇总
    2022-12-12
  • vue使用vue-video-player插件播放视频的步骤讲解
    vue使用vue-video-player插件播放视频的步骤讲解
    2022-12-12
  • Vue Class Component类组件用法
    Vue Class Component类组件用法
    2022-12-12
  • vue图片转base64格式的方法示例
    vue图片转base64格式的方法示例
    2022-12-12
  • Vue防抖与节流的使用介绍
    Vue防抖与节流的使用介绍
    2022-12-12
  • 美国设下计谋,用娘炮文化重塑日本,已影响至中国
    美国设下计谋,用娘炮文化重塑日本,已影响至中国
    2021-11-19
  • 时空伴随者是什么意思?时空伴随者介绍
    时空伴随者是什么意思?时空伴随者介绍
    2021-11-09
  • 工信部称网盘企业免费用户最低速率应满足基本下载需求,天翼云盘回应:坚决支持,始终
    工信部称网盘企业免费用户最低速率应满足基本下载需求,天翼云盘回应:坚决支持,始终
    2021-11-05
  • 2022年放假安排出炉:五一连休5天 2022年所有节日一览表
    2022年放假安排出炉:五一连休5天 2022年所有节日一览表
    2021-10-26
  • 电脑版 - 返回首页

    2006-2024 脚本之家 JB51.Net , All Rights Reserved.
    苏ICP备14036222号