软件工程应用与实践——视频清晰度切换

Posted 2021-12-15 叶卡捷琳堡

2021SC@SDUSC

文章目录

• • 一、概述
  • 二、代码分析
  • • 2.1 安装配置
    • 2.2 播放器的创建
    • 2.3 应用
  • 三、总结

一、概述

在老年健康管理系统中，需要播放相应的视频，在播放视频的过程中，需要调整视频的清晰度。在普通的项目中，我们往往使用H5的video标签，但在本项目中，为了便于视频清晰度的切换，使用了西瓜播放器作为视频播放的工具。

功能具体的截图如下

西瓜播放器是由字节跳动开发的播放器，有比较强大的功能，以下是西瓜播放器的官方网站

https://v2.h5player.bytedance.com/

本次代码分析，主要依据的是该官方网站所提供的文档，以及项目中的源代码

二、代码分析

2.1 安装配置

使用西瓜播放器需要首先使用npm方式引入相应的包

npm install xgplayer

在对应的vue文件中引入

import Player from 'xgplayer'

2.2 播放器的创建

通过阅读官方文档和项目代码后，我们可以知道，本项目创建播放器总共使用了如下步骤

提供一个DOM对象（容器）用户展示播放器

由于本项目并不是直接在网页上播放视频，而是点击按钮，在对应的对话框中播放视频，因此播放视频的DOM对象放在el-dialog（对话框）中，只有当按下按钮后，修改visible.sync双向绑定的值为true，对话框才会显示

<el-dialog
  title="视频"
  :destroy-on-close="true"
  :visible.sync="videoDialogVisible"
  width="600">
  <div>
    <div id="videoplayer" style="margin: 0 auto"></div>
  </div>
</el-dialog>

初始化视频

在点击按钮后，会执行如下的方法，首先获取到三种清晰度对应的URL链接，之后调用西瓜视频的this.player = new Player();，在里面传入相应的参数。

• id表示要绑定的DOM对象的id
• autoplay表明是否一显示就自动播放
• width和height指定播放器宽和高
• url表示此时播放器播放视频的URL
• volume设置初始音量，0.1代表初始音量为10%
• playbackRate可传入数组，表明可选的播放速率
• this.player.emit方法用于设置多清晰度条件下，不同清晰度视频的url，可提供用户切换对应的清晰度

async showDetail(index,row)
  //获取文件名称
  let fileName = row.fileName;
  let fileType = row.fileType;
  //显示视频对话框
  this.videoDialogVisible = true;
  //获取视频链接
  await instance.get("/video/" + fileName).then(res=>
	this.url = res.data.url;
	this.lowUrl = res.data.lowUrl;
	this.highUrl = res.data.highUrl;
  )
  this.$nextTick(() => 
    this.player = new Player(
      id: 'videoplayer',
      autoplay: true,
      width: '95%',
      height:400,
      volume: 0.1,
      url: this.url,
      playbackRate: [0.5, 0.75, 1, 1.5, 2]
    )
    this.player.emit('resourceReady', [
       name: '流畅', url: this.lowUrl ,
       name: '标清', url: this.url ,
       name: '高清', url: this.highUrl 
    ]);
  );
,

需要特别说明的是，在本项目中，由于视频的DOM对象处于对话框内，而对话框默认不显示，即v-if为false，因此在初次创建时，存放DOM对象的div并未被初始化，因此会报错。所以在此项目中，使用vue自带的$nextTick函数，等DOM对象创建之后，再进行初始化，就可以避免该错误。

this.$nextTick详解

this.$ nextTick()方法主要是用用于当数据改变时，DOM对象随之改变的应用场景中。由于在原生vue中，DOM对象与数据的渲染是异步的，因此，如果要让DOM对象随数据改变而改变，需要将数据改变的代码放入this.$nextTick方法中，这样便不会出现当创建播放器时，由于v-if的值为false，导致找不到DOM对象的错误。

this.$nextTick(() => 
  this.player = new Player(
    id: 'videoplayer',
    autoplay: true,
    width: '95%',
    height:400,
    volume: 0.1,
    url: this.url,
    playbackRate: [0.5, 0.75, 1, 1.5, 2]
  )
  this.player.emit('resourceReady', [
     name: '流畅', url: this.lowUrl ,
     name: '标清', url: this.url ,
     name: '高清', url: this.highUrl 
  ]);
);

对应代码的细节

2.3 应用

在本项目中，实现了切换视频清晰度后，视频依然从原本的位置播放的功能。在普通的视频网站中，不应该出现切换清晰度后视频重新从头开始播放的情况。在西瓜播放器中，实现了自动配置，当切换清晰度时，会记录视频原本播放的位置，并继续播放。

在本项目中，清晰度的切换使用了更换视频链接的方式完成，并没有使用前端直接转换的方式，而使用更换视频链接的方式更换清晰度也是目前视频网站比较通用的方式。而视频清晰度的切换使用西瓜播放器中的emit方法实现，具体的部分如下，这里指定了三种清晰度对应的URL，当用户点击时，自动进行切换。

this.player.emit('resourceReady', [
   name: '流畅', url: this.lowUrl ,
   name: '标清', url: this.url ,
   name: '高清', url: this.highUrl 
]);

三、总结

本篇博客主要分析了老年健康管理系统中，前端播放视频并切换清晰度的实现，由于之前没有接触过视频播放和视频清晰度切换这部分的知识，因此在本次阅读源码的过程中，我通过阅读并查阅资料，了解了一些关于视频播放和清晰度切换的相关知识和相关的组件。总而言之，在这部分源码的阅读中，我对网页播放视频等方面的理解进一步提升了，希望在未来的项目中，能更好地运用这个知识。也非常感谢老师和其他小组成员的帮助，让我顺利地完成了这部分的工作