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

news2025/1/11 8:11:37

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

老样子,npm start开启服务器

说一下问题

 现在打开多个视频会让他,同时播放,相当的吵闹。我们只需要一次只有一个视频播放

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

 

我们传入这个id

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

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

image代替view性能优化

 存在这个问题

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

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

 现在图片和视频共存。思想是,我们当进入页面展示的是图片,点击之后播放视频,然后我们播放下一个视频,停止当前视频,然后变回图片

 首先我们需要在data中顶一个视频ID标识

 

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

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

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

 俩个小边框的问题 

 用object-fit来解决问题

 这里就不存这个问题了

视频列表滑动功能实现 

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

 这样就ok了

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

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

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

 

  我们现在是视频播放,我们实时监听。但是如果视频播放结束呢

 使用这个事件

 移除功能 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/514960.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

shell脚本语言

# 编写一个名为myfirstshell.sh的脚本,它包括以下内容。 #!/bin/bash# 1、包含一段注释,列出您的姓名、脚本的名称和编写这个脚本的目的 # 杨轩 # myfirstshell.sh # 脚本命令的练习# 2、和当前用户说“hello 用户名” echo "hello xuan"# 3、…

Vue生命周期函数执行顺序(使用注意事项)

文章目录 beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed Vue.js 是一个基于 MVVM 模式的前端框架,它的核心是一个响应式的数据绑定系统。在 Vue.js 中,组件是一个可复用的 Vue 实例,它拥有自己的生命周期…

第二章 进程管理

2.1 进程的引入 2.1.1程序的顺序执行 1.程序的顺序执行 程序是人们要计算机完成特定功能的一些指令序列,是一个按严格次序、顺序执行的操作序列,是一个静态的概念。 如:有一个程序,要求先输入数据,再做相应的计算…

platform_get_resource=NULL内核源码分析

platform_get_resourceNULL内核源码分析 文章目录 platform_get_resourceNULL内核源码分析1.第一步,我们看一下什么情况下platform_get_resource函才会返回NULL,也就是没有获取到资源。2.第二步,因为myled这个设节点会转成了platform_device,…

suricata中DPDK收发包线程模型和配置说明

《基于DPDK收包的suricata的安装和运行》中已经讲过基于DPDK收发包的suricata的安装过程,今天我们来看一下,suricata中DPDK的收发包线程模型以及相关的配置。 1、收发包线程模型: 通过分析代码,suricata中DPDK收发包线程模型如下…

C高级 day03

1.编写一个名为myfirstshell.sh的脚本,它包括以下内容。 1、包含一段注释,列出您的姓名、脚本的名称和编写这个脚本的目的 2、和当前用户说“hello 用户名” 3、显示您的机器名 hostname 4、显示上一级目录中的所有文件的列表 5、显示变量PATH和HOM…

采药 DP 裸01背包 java

&#x1f351; 采药 import java.util.*;class Main{static int N 1010;static int[] f new int[N];public static void main(String[] aaa){Scanner sc new Scanner(System.in);int m sc.nextInt();int n sc.nextInt();for(int i 0; i < n; i){int v sc.nextInt()…

s2021ss62找规律

代码&#xff1a; #include<bits/stdc.h> using namespace std; int n,m,ans; int main() {cin>>n>>m;for(int i1;i<n-1;i)ansi;cout<<ansm;return 0; }

一文了解支付卡行业数据安全标准(PCI DSS 4.0)新要求

在接下来不到一年的时间里&#xff0c;将有越来越多的企业要遵守支付卡行业数据安全标准 (PCI DSS) 4.0 版的多项新要求。 关于 PCI DSS PCI DSS 包含 12 项保护支付卡数据的要求&#xff0c;在过去十年中都没有更新。但经过三年的商讨&#xff0c;现在已经进行了重大改革。 …

JavaScript基础语法篇超详解

目录 一. 什么是JavaScript? 概念 JavaScript可以做的事情 JavaScript和HTML, CSS之间的关系 JavaScript运行过程 二. 基础语法篇 第一个JavaScript程序 JS的书写形式 JS的代码注释 输入输出 变量的使用 变量命名 数据类型 变量的声明和使用 理解动态类型 JS变量类型 JS数组…

一百一十一、Hive——从HDFS到Hive的数据导入(静态分区、动态分区)

一、分区的定义 分区表实际上就是对应一个 HDFS 文件系统上的独立的文件夹&#xff0c; Hive 中的分区就是分目录 &#xff0c;把一个大的数据集根据业务需要分割成小的数据集。 在查询时通过 where 子句中的表达式选择查询所需要的指定的分区&#xff0c;这样的查询效率 会…

【教程】手把手教你用Clion进行STM32开发【如何优雅の进行嵌入式开发】

通过Clion进行嵌入式开发 一、工具安装 1、安装Clion 因为众所周知的原因&#xff0c;Clion的安装就不解释了&#xff0c;有需要的同学自行检索 2、安装STM32CubeMX 正常去官网下载最新版的安装就行了&#xff1a;STM32CubeMX - STM32Cube initialization code generator …

2673. 使二叉树所有路径值相等的最小代价(dfs+bfs)

题目描述 评论 (23) 题解 (54) 提交记录 2673. 使二叉树所有路径值相等的最小代价 难度 中等 14 给你一个整数 n 表示一棵 满二叉树 里面节点的数目&#xff0c;节点编号从 1 到 n 。根节点编号为 1 &#xff0c;树中每个非叶子节点 i 都有两个孩子&#xff0c;分别是左孩子 2 …

image adaptive 3dlut based on deep learning

文章目录 image adaptive 3dlut based on deep learning1. Learning Image-adaptive 3D Lookup Tables for High Performance Photo Enhancement in Real-time2. CLUT-Net: Learning Adaptively Compressed Representations of 3DLUTs for Lightweight Image Enhancement2.1 3d…

平安大视野解读主动健康:以运动改变生命轨迹,以名医权益为健康保驾护航

“每个人都会老&#xff0c;这不可避免&#xff0c;但是能不能老的迟一点&#xff1f;让我们能够活到一百岁还能够运动&#xff0c;不需要别人照顾&#xff0c;这是最大的成功&#xff1b;而科学运动是最关键的方式。”5月6日&#xff0c;在平安私人银行联合平安健康举办的“平…

Echarts使用本地JSON文件加载不出图表的解决方法以及Jquery访问本地JSON文件跨域的解决方法

前言 最近需要做一个大屏展示&#xff0c;需要用原生html5cssjs来写&#xff0c;所以去学了一下echarts的使用。在使用的过程中难免碰到许多BUG&#xff0c;百度那是必不可少的&#xff0c;可是这些人写的牛头不对马嘴&#xff0c;简直是标题党一大堆&#xff0c;令我作呕&…

使用pytest和allure框架实现自动化测试报告优化

目录 -x出现一条测试用例失败就退出测试 生成测试报告json pytest&#xff1a; 需要安装pytest和pytest-html(生成html测试报告&#xff09; pip install pytest 和 pip install pytest-html 命名规则 Pytest单元测试中的类名和方法名必须是以test开头,执行中只能找到test开头…

DeepLab v1

SEMANTIC IMAGE SEGMENTATION WITH DEEP CONVOLUTIONAL NETS AND FULLY CONNECTED CRFS 基于深度卷积网络和全连通CRFS的语义图像分割 ABSTRACT 深度卷积神经网络&#xff08;DCNNs&#xff09;最近在高级视觉任务中表现出了最新的性能&#xff0c;如图像分类和物体检测。这…

Docker | docker安装MySQL

知识目录 一、前言二、安装Docker镜像2.1 什么是docker2.2 为什么安装docker2.3 安装docker 三、Docker安装MySQL3.1 常用docker命令3.2 docker安装MySQL 四、结语 一、前言 大家好&#xff01;这篇文章主要讲解 如何在Centos7中安装Docker以及Docker安装MySQL:5.7.42 。 ✨本…

深度学习模型复杂度评估(时间复杂度、空间复杂度)

目录 1、两个指标 2、复杂度对模型的影响 1、两个指标 时间复杂度和空间复杂度是衡量一个算法的两个重要指标,用于表示算法的最差状态所需的时间增长量和所需辅助空间. 在深度学习神经网络模型中我们也通过&#xff1a; 计算量/FLOPS&#xff08;时间复杂度&#xff09;即…