福建住房与城乡建设网站,sharepoint 网站开发,电力通信网网络架构,抖音电商培训最近公司的产品上线#xff0c;一些高级功能在基础版本中不对用户开发#xff0c;通过视频的形式展示。产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件#xff0c;通过 demo案例很快实现了视频播放效果classvjs-custom-skinrefvideoP…最近公司的产品上线一些高级功能在基础版本中不对用户开发通过视频的形式展示。产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件通过 demo案例很快实现了视频播放效果classvjs-custom-skinrefvideoPlayer1:optionsplayerOptions:playsinlinetrue:eventseventsplayonPlayerPlay($event)pauseonPlayerPause($event)endedonPlayerEnded($event)loadeddataonPlayerLoadeddata($event)waitingonPlayerWaiting($event)playingonPlayerPlaying($event)timeupdateonPlayerTimeupdate($event)canplayonPlayerCanplay($event)canplaythroughonPlayerCanplaythrough($event)readyplayerReadiedstatechangedplayerStateChanged($event)老板看了之后说: 不需要全屏切换,不需要让用户看的那么仔细,通过配置项 controlBar: {fullscreenToggle: false},关闭全屏切换后由于视频标清、展示区域大小 483px X 303px,根本看不清视频里内容老板又说实现全屏不铺满整个屏幕而是通过固定大小的弹出层展示首先想到的是 开启全屏切换监听全屏切换的事件在事件中强制退出全屏显示固定大小的弹出层...:eventseventsfullscreenchangeonPlayerFullScreenchange($event)...// 需要在 events 中指定全屏切换事件不然无法监听data () {return {videoDialogVisible: false, // 控制弹出层events: [fullscreenchange]}},methods: {...onPlayerFullScreenchange (player) {player.exitFullscreen() //强制退出全屏恢复正常大小this.videoDialogVisible true}...}这种办法虽然能实现但在强制退出全屏那一下整个页面会跳一下碰到网速慢或电脑卡的情况效果更差...没办法继续想办法在该插件 GitHub 库中有网友提过相关 issues , 通过 注册一个自定义按钮组件添加到播放器的 controlBar中,替换默认的全屏切换按钮import * as videojs from video.jsexport 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 中指定自定义按钮样式.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;}}}}自定义的按钮图标用的还是默认的全屏图标接着得实现按钮的点击事件页面和弹出层中分别是俩个 播放器实例 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 通过自定义按钮组件实现全屏切换效果希望对大家有所帮助如果大家有任何疑问请给我留言小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持
