网易云音乐开发--完善video模块

4月前作者：开局：从前端小白做起分类：Toy博客阅读(18) 违法举报

这篇具有很好参考价值的文章主要介绍了网易云音乐开发--完善video模块。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

解决多个视频同时播放问题

老样子，npm start开启服务器

网易云音乐开发--完善video模块说一下问题

网易云音乐开发--完善video模块现在打开多个视频会让他，同时播放，相当的吵闹。我们只需要一次只有一个视频播放

网易云音乐开发--完善video模块

看文档，我们的思路是点击这个视频，关闭上次视频

网易云音乐开发--完善video模块

我们传入这个id 网易云音乐开发--完善video模块

现在只能实现找到上一个视频的实例对象

网易云音乐开发--完善video模块

这就能实现确定点击播放的视频和正在播放的视频不是同一个视频

image代替view性能优化

网易云音乐开发--完善video模块

存在这个问题网易云音乐开发--完善video模块

我们使用video组件中的poster属性

网易云音乐开发--完善video模块

我们/video/url?id=89ADDE33C0AAE8EC14B99F6750DB954D地址下面的是没有相应的图片。而/video/detail?id=89ADDE33C0AAE8EC14B99F6750DB954D下是有相对应的图片。先通过写死的方式现在这个效果。后续想个办法，把这俩个接口连接起来

网易云音乐开发--完善video模块

网易云音乐开发--完善video模块现在图片和视频共存。思想是，我们当进入页面展示的是图片，点击之后播放视频，然后我们播放下一个视频，停止当前视频，然后变回图片

网易云音乐开发--完善video模块首先我们需要在data中顶一个视频ID标识

网易云音乐开发--完善video模块

其实直接添加 autoplay="true"也可以自动播放

而之前我们大量的介绍了多个视频播放的问题，但是随着本次优化，规避掉了

解决视频内容大小和video不一致问题

网易云音乐开发--完善video模块俩个小边框的问题

网易云音乐开发--完善video模块

用object-fit来解决问题

网易云音乐开发--完善video模块

这里就不存这个问题了

视频列表滑动功能实现

网易云音乐开发--完善video模块

那就那个导航栏会随着这个滚动条一起滑动

网易云音乐开发--完善video模块这样就ok了

实现再次播放跳转到指定位置

网易云音乐开发--完善video模块

思路，1.需要time 2.vid 我们可以整合成一个对象，多个对象，可以用数组

那么我们如何知道实时播放的时间呢？

网易云音乐开发--完善video模块

网易云音乐开发--完善video模块我们现在是视频播放，我们实时监听。但是如果视频播放结束呢

网易云音乐开发--完善video模块使用这个事件

网易云音乐开发--完善video模块移除功能

文章来源地址https://www.toymoban.com/news/detail-440727.html

到了这里，关于网易云音乐开发--完善video模块的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

flutter开发实战-video_player播放多个视频MediaCodecVideoRenderer error问题

flutter开发实战-video_player播放多个视频MediaCodecVideoRenderer error问题在开发过程中，我这里使用video_player播放多个视频的时候，出现了MediaCodecVideoRenderer error 使用video_player播放单个视频请查看 https://blog.csdn.net/gloryFlow/article/details/132124837 这里记录一下解决多个视频MediaCodecVideoRe

2024年02月09日
浏览(15)
微信小程序之网易云音乐的实现-云音乐

基本介绍基本功能都实现了,音乐的上一首下一首播放等,顺便把进度条的拖动播放写了下主页的每日推荐界面写了 ,登录通过账号密码登录 (你也可以自己加一个验证码或者邮箱登录 ) 基于iPhone6(375*667分辨率)开发,后面一些计算都是通过获取当前屏幕下的尺寸来计算的,但是不

2024年02月10日
浏览(14)
Python爬虫网易云音乐，Tkinter制作音乐播放器

目录一、效果展示二、环境三、实现过程四、源码页面的美化以及功能还有待升级~ 先来说一下已有功能吧：可以在搜索框中通过歌曲或歌手名称进行搜索，效果和在网易云官网搜索一样。点击开始下载，就会将搜索结果的第一条歌曲下载到指定文件夹下载完毕后，会遍

2024年02月04日
浏览(20)
安装UWP版网易云音乐

下载APPX文件JasonWei512/NetEase-Cloud-Music-UWP-Repack: 网易云音乐 UWP 不更新版 (github.com) 下载安装 LTSC-Add-MicrosoftStore/Microsoft.NET.Native.Runtime.1.6_1.6.24903.0_x64__8wekyb3d8bbwe.Appx at master · kkkgo/LTSC-Add-MicrosoftStore (github.com)

2024年02月11日
浏览(8)
Python爬虫 - 网易云音乐下载

爬取网易云音乐实战，仅供学习，不可商用，出现问题，概不负责！分为爬取网易云歌单和排行榜单两部分。因为网页中，只能显示出歌单的前20首歌曲，所以仅支持下载前20首歌曲（非VIP音乐）具体过程： 1.通过抓包，获取到请求头 2.发送请求，获取到网页源代码，通过

2024年01月19日
浏览(15)
docker安装网易云音乐(yesplaymusic)

演示地址：https://music.qier222.com/ 镜像地址：https://hub.docker.com/r/fogforest/yesplaymusic/tags 项目地址：https://github.com/qier222/YesPlayMusic ✨ 特性 ✅ 使用 Vue.js 全家桶开发 🔴 网易云账号登录（扫码/手机/邮箱登录） 📺 支持 MV 播放 📃 支持歌词显示 📻 支持私人 FM / 每日推荐歌曲 🚫🤝

2024年02月05日
浏览(24)
基于网易云音乐API的微信小程序——zwhdlb的音乐平台

最近在学习小程序的开发的过程中，临时想写一个音乐小程序，看到了网易云提供了后台api程序，这方便我们直接进行音乐小程序的开发不用再从后端开始开发，网易云音乐平时也经常在用，因此想记录一下学习过程开发工具：微信开发者工具界面UI组件库用到的是ColorUI

2023年04月27日
浏览(18)
JAVA版网易云音乐格式转换器

网易云音乐下载的歌曲格式多为ncm，这种格式除了用网易云音乐App其他播放器无法播放。于是想寻求其格式转换的工具，搜索了下确实有相关工具，不过很多山寨工具需要收费。然后又试图寻求其他方式，经过一番调研发现这玩意其实早已经被人扒光了到处裸奔（我估摸着这

2024年02月21日
浏览(14)
网易云音乐小程序案例分享附完整代码

todo: 添加音乐到收藏（最近）列表歌词滚动

2023年04月24日
浏览(15)
微信小程序之网易云音乐小案例

目录一.编写对网易云音乐api发起请求的代码二.编写视频项（组件）三.编写mv列表:包含(轮播图+视频列表[每个视频项引用组件来呈现]) 四.编写视频详情页成品图: 准备工作: ——在pages下新建两个page(index,video_detail)mv首页和视频详情 ——在根目录下创建components,并在其中创建

2024年02月05日
浏览(14)