看网站视频想边看边记录或者敲代码怎么办?小技巧帮你解决,巧用窗口分屏模式

技巧一

首先下载带有视频窗口模式的浏览器:
如360极速浏览器或者火狐浏览等,上述亲测有效(ie和谷歌暂时不行)
然后把鼠标移到视频网站上视频小窗口(点击浏览器软件自带的小功能)
如360极速浏览器点击视频右上方小窗口播放,火狐浏览器则将鼠标移动到视频内点击画中画即可看见小窗口啦两个。注意:窗口模式大小可以手动调节(亲测学习通,b站,传智的高校学习平台都有效,这个是浏览器内嵌的功能所以几乎全能,可自行测试自己想用的在线视频网站)

操作简单符上一些图片:
在这里插入图片描述
在这里插入图片描述
点击后效果:
在这里插入图片描述在这里插入图片描述窗口大小都是可调节的,注意火狐浏览器的画中画功能不带标题,视频信息,而360极速浏览器的则是带有网站信息以及视频信息的,可根据个人喜好使用,使用者自行测试

技巧二

巧用win10自带的分屏功能,将你把用的电脑软件拉到边缘,然后win10就会弹出一个界面,可以选择另外一个窗口变成分屏模式,各占一半,屏占比可以手动调节,这个一半适合看博客然后练习代码,看网站在线视频推荐技巧一。此技巧也是亲测有效看个人喜好使用

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
由于没有完整的代码和数据,以下是基于EZUIKit.EZUIKitPlayer和Vue实现多个视频播放的示例代码: HTML模板: ``` <template> <div class="video-container"> <div v-for="index in grid" :key="index" class="grid-item"> <div ref="videoContainer" :id="'video'+index" class="video-item"></div> </div> </div> </template> ``` CSS样式: ``` .video-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100vh; background-color: #333; } .grid-item { width: calc(100% / 4); height: calc(100% / 4); margin: 0.1rem; position: relative; } .video-item { width: 100%; height: 100%; } ``` JavaScript代码: ``` <script> import EZUIKit from 'ezuikit-js' export default { data() { return { grid: 1, // 默认一分屏 players: [] // 存放EZUIKitPlayer实例的数组 } }, mounted() { this.initPlayers() // 初始化EZUIKitPlayer实例 }, methods: { initPlayers() { for (let i = 1; i <= 16; i++) { let player = new EZUIKit.EZUIKitPlayer(`video${i}`) this.players.push(player) } }, changeGrid(num) { this.grid = num this.resizePlayers() // 调整视频窗口大小 }, resizePlayers() { let width = 100 / Math.sqrt(this.grid) // 计算每个视频窗口的宽度 let height = 100 / Math.sqrt(this.grid) // 计算每个视频窗口的高度 this.players.forEach((player, index) => { if (index < this.grid) { player.play() // 播放视频 player.setVideoSize(`${width}%`, `${height}%`) // 设置视频窗口大小 } else { player.stop() // 停止播放视频 player.setVideoSize('0%', '0%') // 隐藏视频窗口 } }) } } } </script> ``` 在以上代码中,我们使用了EZUIKit.EZUIKitPlayer插件创建了一个视频播放器实例,并将其存放到一个数组中。然后我们使用Vue的computed属性计算出每个视频窗口的大小,并在changeGrid方法中调用resizePlayers方法来调整视频窗口大小。 我们可以使用以下代码来在页面中设置不同的分屏数量: ``` <div class="btn-group"> <button @click="changeGrid(1)">一分屏</button> <button @click="changeGrid(4)">四分屏</button> <button @click="changeGrid(6)">六分屏</button> <button @click="changeGrid(9)">九分屏</button> <button @click="changeGrid(16)">十六分屏</button> </div> ``` 以上代码中,我们使用了一个按钮组来切换不同的分屏数量。当用户点击按钮时,我们调用changeGrid方法,并将分屏数量作为参数传递给它。然后在changeGrid方法中,我们调用resizePlayers方法来调整视频窗口大小。 总结: 我们使用Vue和EZUIKit.EZUIKitPlayer实现了多个视频播放,并且可以实现一分屏、四分屏、六分屏、九分屏、十六分屏的功能。这个示例代码可以助你了解如何使用Vue和EZUIKit.EZUIKitPlayer来实现多个视频播放。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值