简易视频播放器（案例）

news2024/9/24 3:22:15

介绍

img

本篇Codelab使用ArkTS语言实现视频播放器，主要包括主界面和视频播放界面，我们将一起完成以下功能：

  1. 主界面顶部使用Swiper组件实现视频海报轮播。
  2. 主界面下方使用List组件实现视频列表。
  3. 播放界面使用Video组件实现视频播放。
  4. 在不使用视频组件默认控制器的前提下，实现自定义控制器。
  5. 播放界面底部使用图标控制视频播放/暂停。
  6. 播放界面底部使用Slider组件控制和实现视频播放进度。
  7. 播放界面使用Stack容器组件的Ｚ序控制在视频播放画面上展示开始／暂停／加载图标。

主界面中最近播放和为你推荐列表播放网络视频，需将CommonConstants.ets中的NET属性修改为网络视频地址。

相关概念

  • Swiper组件：滑块视图容器，提供子组件滑动轮播显示的能力。
  • List组件：列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
  • Video组件：用于播放视频文件并控制其播放状态的组件。
  • Navigator组件：路由容器组件，提供路由跳转能力。
  • ForEach组件：ForEach基于数组类型数据执行循环渲染。

完整示例

gitee源码地址

源码下载

简易视频播放器（ArkTS）.zip

代码结构解读

本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在源码下载或gitee中提供。

├──entry/src/main/ets             // 代码区
│  ├──common
│  │  └──constants
│  │     └──CommonConstants.ets   // 样式常量类
│  ├──entryability
│  │  └──EntryAbility.ts          // 程序入口类
│  ├──model
│  │  └──VideoControll.ets        // 视频播放控制相关方法类
│  ├──pages
│  │  ├──SimpleVideoIndex.ets     // 主界面
│  │  └──SimpleVideoPlay.ets      // 视频播放界面
│  ├──view
│  │  ├──IndexModule.ets          // 自定义首页List模块组件文件
│  │  ├──IndexSwiper.ets          // 自定义首页Swiper组件文件
│  │  ├──VideoPlayer.ets          // 自定义播放界面视频组件文件
│  │  └──VideoPlaySlider.ets      // 自定义播放界面视频进度条组件文件
│  └──viewmodel
│     ├──HorizontalVideoItem.ets  // 水平视频类
│     ├──ParamItem.ets            // 参数类
│     ├──SwiperVideoItem.ets      // banner视频类
│     └──VideoData.ets            // 首页相关数据
└──entry/src/main/resource        // 应用静态资源目录

构建主界面

主界面由视频轮播模块和多个视频列表模块组成，效果图如图：

img

VideoData.ets中定义的视频轮播图数组SWIPER_VIDEOS和视频列表图片数组HORIZONTAL_VIDEOS。

// VideoData.ets
import { HorizontalVideoItem } from './HorizontalVideoItem';
import { SwiperVideoItem } from './SwiperVideoItem';

export const SWIPER_VIDEOS: SwiperVideoItem[] = [
  new SwiperVideoItem($r('app.media.banner1')),
  new SwiperVideoItem($r('app.media.banner2')),
  new SwiperVideoItem($r('app.media.banner3'))
];

export const HORIZONTAL_VIDEOS: HorizontalVideoItem[] = [
  new HorizontalVideoItem(1, $r('app.media.video_list0'), '视频1'),
  new HorizontalVideoItem(2, $r('app.media.video_list1'), '视频2'),
  new HorizontalVideoItem(3, $r('app.media.video_list2'), '视频3')
];

IndexSwiper.ets文件中定义的轮播图子组件SwiperVideo，点击轮播图片，页面跳转到视频播放页面，并携带本地视频flag，效果图如图：

img

// IndexSwiper.ets
@Component
export struct SwiperVideo {
  build() {
    Column() {
      Swiper() {
        ForEach(SWIPER_VIDEOS, (item: SwiperVideoItem) => {
          SwiperItem({ imageSrc: item.image, source: $rawfile('videoTest.mp4') })
        }, (item: SwiperVideoItem) => JSON.stringify(item))
      }
      .autoPlay(true)
    }
    // 样式设置
    ...
  }
}

@Component
struct SwiperItem {
  private imageSrc: Resource = $r('app.string.empty');
  private source: Resource = $r('app.string.empty');
  private paramItem: ParamItem = new ParamItem();
  ...

  build() {
    // 跳转一：使用Navigator组件跳转到视频播放界面
    Navigator({ target: SECOND_PAGE, type: NavigationType.Push }) {
      Image(this.imageSrc)
        .borderRadius(MARGIN_FONT_SIZE.FIRST_MARGIN)
    }
    .params(this.paramItem)
  }
}

IndexModule.ets文件中定义的视频列表图片子组件VideoModule，点击子组件中的图片，页面跳转到视频播放页面，并携带网络视频flag，效果图如图：

img

// IndexModule.ets
@Component
export struct VideoModule {
  private moduleName: string = '';

  build() {
    Column() {
      // 视频列表上方的文本信息
      ...
      // 视频列表组件
      List({ space: MARGIN_FONT_SIZE.FIRST_MARGIN }) {
        ForEach(HORIZONTAL_VIDEOS, (item: HorizontalVideoItem) => {
          ListItem() {
            HorizontalItem({
              imageSrc: item.image,
              source: NET,
              videoName: item.name
            })
          }
        }, (item: HorizontalVideoItem) => JSON.stringify(item))
      }
      // 设置列表横向排列
      .listDirection(Axis.Horizontal)
    }
    // 样式设置
    ...
  }
}

@Component
struct HorizontalItem {
  private imageSrc: Resource = $r('app.string.empty');
  private source: string = '';
  private videoName: string = '';

  build() {
    // 跳转二：使用route跳转到视频播放界面
    Column() {
      Image(this.imageSrc)
        .width(MARGIN_FONT_SIZE.SEVENTH_MARGIN)
        .height(MARGIN_FONT_SIZE.SIXTH_MARGIN)
        .onClick(() => {
          router.pushUrl({
            url: SECOND_PAGE,
            params: { source: this.source }
          });
        })
     ...
    }
    .justifyContent(FlexAlign.Center)
  }
}

在SimpleVideoIndex.ets主界面中引用SwiperVideo和VideoModule子组件。

// SimpleVideoIndex.ets
@Entry
@Component
struct SimpleVideoIndex {
  build() {
    Column({ space: MARGIN_FONT_SIZE.FOURTH_MARGIN }) {
      // 视频轮播组件
      SwiperVideo()
      List() {
        ForEach(LIST, (item: string) => {
          ListItem() {
            VideoModule({ moduleName: item })
              .margin({ top: MARGIN_FONT_SIZE.FIRST_MARGIN })
          }
        }, (item: string) => JSON.stringify(item))
      }
      .listDirection(Axis.Vertical)
      .margin({ top: MARGIN_FONT_SIZE.THIRD_MARGIN })
    }
    ...
  }
}

构建视频播放界面

VideoPlayer.ets其中定义了视频播放子组件VideoPlayer ，onPrepared回调方法中可以获取视频总时长，onUpdate回调方法中可实时获取到视频播放的当前时间戳，onFinish是视频播放结束后的回调方法，onError是视频播放出错的回调方法。

// VideoPlayer.ets
@Component
export struct VideoPlayer {
  private source: string | Resource = '';
  private controller: VideoController = new VideoController();
  private previewUris: Resource = $r('app.media.preview');
  @Provide currentTime: number = 0;
  @Provide durationTime: number = 0;
  @Provide durationStringTime: string = START_TIME;
  @Provide currentStringTime: string = START_TIME;
  @Consume isPlay: boolean;
  @Consume isOpacity: boolean;
  @Consume flag: boolean;
  @Consume isLoading: boolean;
  @Consume progressVal: number;

  build() {
    Column() {
      Video({
        src: this.source,
        previewUri: this.previewUris,
        controller: this.controller
      })
        .width(ALL_PERCENT)
        .height(STRING_PERCENT.NINETY_PERCENT)
        .controls(false)
        .autoPlay(false)
        .objectFit(ImageFit.Contain)
        .loop(false)
        .onUpdate((event) => {
          if (event) {
            this.currentTime = event.time;
            this.currentStringTime = changeSliderTime(this.currentTime);
          }
        })
        .onPrepared((event) => {
          this.prepared(event?.duration);
        })
        .onFinish(() => {
          this.finish();
        })
        .onError(() => {
          prompt.showToast({
            duration: COMMON_NUM_DURATION,
            message: MESSAGE
          });
        })
      VideoSlider({ controller: this.controller })
    }
  }
  ...
}

在自定义组件VideoPlayer底部使用了自定义子组件VideoSlider，VideoSlider自定义组件中显示和控制视频播放进度，效果图如图：

img

// VideoPlaySlider.ets
@Component
export struct VideoSlider {
  @Consume isOpacity: boolean;
  private controller: VideoController = new VideoController();
  @Consume currentStringTime: string;
  @Consume currentTime: number;
  @Consume durationTime: number;
  @Consume durationStringTime: string;
  @Consume isPlay: boolean;
  @Consume flag: boolean;
  @Consume isLoading: boolean;
  @Consume progressVal: number;

  build() {
    Row({ space: MARGIN_FONT_SIZE.FIRST_MARGIN }) {
      ...
      Slider({
        value: this.currentTime,
        min: 0,
        max: this.durationTime,
        step: 1,
        style: SliderStyle.OutSet
      })
        .blockColor($r('app.color.white'))
        .width(STRING_PERCENT.SLIDER_WITH)
        .trackColor(Color.Gray)
        .selectedColor($r("app.color.white"))
        .showSteps(true)
        .showTips(true)
        .trackThickness(this.isOpacity ? SMALL_TRACK_THICK_NESS : BIG_TRACK_THICK_NESS)
        .onChange((value: number, mode: SliderChangeMode) => {
          this.sliderOnchange(value, mode);
        })
      ...
    }
    .opacity(this.isOpacity ? DEFAULT_OPACITY : 1)
    ...
  }
  ...
}

在VideoController.ets中的视频控制和回调的相关方法。

// VideoControll.ets
export function changeSliderTime(value: number): string {
  let second: number = value % COMMON_NUM_MINUTE;
  let min: number = Number.parseInt((value / COMMON_NUM_MINUTE).toString());
  let head = min < COMMON_NUM_DOUBLE ? `${ZERO_STR}${min}` : min;
  let end = second < COMMON_NUM_DOUBLE ? `${ZERO_STR}${second}` : second;
  let nowTime = `${head}${SPLIT}${end}`;
  return nowTime;
}

在SimpleVideoPlay.ets播放界面，引用VideoPlayer子组件，并在视频播放页面使用堆叠容器，在视频播放画面中心堆叠控制、视频加载图标，效果图如图：

img

// SimpleVideoPlay.ets
@Entry
@Component
struct Play {
  // 取到Index页面跳转来时携带的source对应的数据。
  private source: string = (router.getParams() as Record<string, Object>).source as string;
  private startIconResource: Resource = $r('app.media.ic_public_play');
  private backIconResource: Resource = $r('app.media.ic_back');
  @Provide isPlay: boolean = false;
  @Provide isOpacity: boolean = false;
  controller: VideoController = new VideoController();
  @Provide isLoading: boolean = false;
  @Provide progressVal: number = 0;
  @Provide flag: boolean = false;

  ...
  onPageHide() {
    this.controller.pause();
  }

  build() {
    Column() {
      // 顶部返回以及标题
　　　　...
      Stack() {
        // 不同的播放状态渲染不同得控制图片
        if (!this.isPlay && !this.isLoading) {
          Image(this.startIconResource)
            .width(MARGIN_FONT_SIZE.FIFTH_MARGIN)
            .height(MARGIN_FONT_SIZE.FIFTH_MARGIN)
            // 同一容器中兄弟组件显示层级关系，z值越大，显示层级越高 用于控制图片在视频上。
            .zIndex(STACK_STYLE.IMAGE_Z_INDEX)
        }
        if (this.isLoading) {
          Progress({
            value: STACK_STYLE.PROGRESS_VALUE,
            total: STACK_STYLE.PROGRESS_TOTAL,
            type: ProgressType.ScaleRing
          })
            .color(Color.Grey)
            .value(this.progressVal)
            .width(STACK_STYLE.PROGRESS_WIDTH)
            .style({
              strokeWidth: STACK_STYLE.PROGRESS_STROKE_WIDTH,
              scaleCount: STACK_STYLE.PROGRESS_SCALE_COUNT,
              scaleWidth: STACK_STYLE.PROGRESS_SCALE_WIDTH
            })
            .zIndex(STACK_STYLE.PROGRESS_Z_INDEX)
        }
        VideoPlayer({
          source: this.source,
          controller: this.controller
        })
          .zIndex(0)
      }
    }
    .height(ALL_PERCENT)
    .backgroundColor(Color.Black)
  }
}

总结

您已经完成了本次Codelab的学习，并了解到以下知识点：

  1. Swiper组件的使用。
  2. List组件的使用。
  3. Video组件的使用。
  4. Slider组件的使用。
  5. 如何实现自定义视频控制器。

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

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

相关文章

在Uniapp中使用Echarts创建可视化图表

在Uniapp中使用Echarts创建可视化图表

在uniapp中可以引入echarts创建数据可视化图表。 1. 安装Echarts 使用npm安装echarts插件&#xff0c;命令如下&#xff1a; npm install echarts --save2. 引入Eharts 在需要使用Echarts的页面引入&#xff1a; import *as echarts from echarts3. 创建实例 创建画布元素…
阅读更多...
基于单片机的农田灌溉系统（论文+源码）

基于单片机的农田灌溉系统（论文+源码）

1.系统设计 本系统主要实现如下目标&#xff1a; 1&#xff0e;可以实时监测土壤湿度&#xff1b; 2&#xff0e;土壤湿度太低时&#xff0c;进行浇水操作&#xff1b; 3&#xff0e;可以按键设置湿度的触发阈值&#xff1b; 4. 可以实现远程操控 5&#xff0e;可以实现手…
阅读更多...
基于 ESP32-C3 开启 Flash 加密和安全启动并进行 OTA 测试

基于 ESP32-C3 开启 Flash 加密和安全启动并进行 OTA 测试

软件&#xff1a; esp-idf v5.1.2 硬件&#xff1a; ESP32-C3 board 1. 首先&#xff0c;准备一个明文固件 hello-world.bin 基于 esp-idf-v5.1.2\examples\get-started\hello_world 例程&#xff0c;使用如下指令&#xff0c;直接编译&#xff0c;获取明文固件 hello-worl…
阅读更多...
【软考中级-软件设计师】day1：CPU、数据的表示、校验码

【软考中级-软件设计师】day1：CPU、数据的表示、校验码

考点分布目录 中央处理单元CPU 练习题 数据的表示 二进制转十进制 练习题 十进制转二进制 练习题 原码 练习题 反码 练习题 补码 练习题 练习题 移码 浮点数 练习题 奇偶校验 练习题 校验码 模2除法 循环冗余校验CRC 练习题 练习题 练习题 奇偶校验码 只…
阅读更多...
【读书】《白帽子讲web安全》个人笔记Ⅰ-1

【读书】《白帽子讲web安全》个人笔记Ⅰ-1

目录 前言&#xff1a; 第1章 我的安全世界观 1.1 Web安全简史 1.1.1中国黑客简史 1.1.2黑客技术的发展历程 1.1.3web安全的兴起 1.2黑帽子&#xff0c;白帽子 1.3返璞归真&#xff0c;揭秘安全的本质 1.4破除迷信&#xff0c;没有银弹 1.5安全三要素 1.6如何实施安…
阅读更多...
​结构体数组

​结构体数组

1. 结构体的声明 1.1 结构体的基础知识 结构是一些值的集合&#xff0c;这些值被称为成员变量。结构的每个成员可以是不同类型的变量。 1.2 结构的声明 struct tag {member - list; }variable-list; 例&#xff1a;描述一个人的信息&#xff1a;名字电话性别身高 //声明的…
阅读更多...
Vue2 - computed 和 method 的原理区别

Vue2 - computed 和 method 的原理区别

目录 1&#xff0c;简单对比2&#xff0c;原理的不同1&#xff0c;method 的处理2&#xff0c;computed 的处理实现缓存触发更新 3&#xff0c;触发更新时的问题 1&#xff0c;简单对比 computed 当做属性使用&#xff0c;method 当做方法使用。computed 可以提供 getter 和 s…
阅读更多...
DS|图（连通与生成树）

DS|图（连通与生成树）

题目一&#xff1a;DS图 -- 图的连通分量 题目描述&#xff1a; 输入无向图顶点信息和边信息&#xff0c;创建图的邻接矩阵存储结构&#xff0c;计算图的连通分量个数。 输入要求&#xff1a; 测试次数t 每组测试数据格式如下&#xff1a; 第一行&#xff1a;顶点数 顶点…
阅读更多...
【激活函数】GELU 激活函数

【激活函数】GELU 激活函数

1、介绍 GELU (Gaussian Error Linear Units) 是一种基于高斯误差函数的激活函数&#xff0c;相较于 ReLU 等激活函数&#xff0c;GELU 更加平滑&#xff0c;有助于提高训练过程的收敛速度和性能。 # GELU激活函数的定义 def gelu(x):return 0.5 * x * (1 torch.tanh(np.sqrt…
阅读更多...
了解统计分析中的岭回归

了解统计分析中的岭回归

一、介绍 在统计建模和机器学习领域&#xff0c;回归分析是用于理解变量之间关系的基本工具。在各种类型的回归技术中&#xff0c;岭回归是一种特别有用的方法&#xff0c;尤其是在处理多重共线性和过拟合时。本文深入探讨了岭回归的概念、其数学基础、应用、优点和局限性。 在…
阅读更多...
OpenHarmony从入门到放弃（四）

OpenHarmony从入门到放弃（四）

设计一款使用Harmony开发的App 接下来我会通过设计并开发一款资讯类的App来入门OpenHarmony&#xff1b; 以下是我对App的设计想法&#xff1b; 一、模块划分 内容模块&#xff1a;App的核心模块&#xff0c;负责管理和展示资讯内容&#xff0c;具体包括内容获取与处理&…
阅读更多...
云化XR技术于农业领域中的表现

云化XR技术于农业领域中的表现

随着科技的不断发展和应用的深入&#xff0c;农业领域也在逐渐引入新技术来优化生产效率和成本、改进管理和监控等。云化XR&#xff08;CloudXR&#xff09;作为一种融合了云计算、虚拟现实&#xff08;VR&#xff09;和增强现实&#xff08;AR&#xff09;等技术的解决方案&am…
阅读更多...
AntV-G6 -- 将G6图表应用到项目中

AntV-G6 -- 将G6图表应用到项目中

1. 效果图 2. 安装依赖 npm install --save antv/g6 3. 代码 import { useEffect } from alipay/bigfish/react; import G6 from antv/g6;const data {id: root,label: 利息收入,subLabel: 3,283.456,ratio: 3,children: [{id: child-a,label: 平均利息,subLabel: 9%,ratio:…
阅读更多...
机器视觉兄弟们，没有项目订单，机器视觉项目行业难题来了

机器视觉兄弟们，没有项目订单，机器视觉项目行业难题来了

产品没一个正形&#xff0c;光源像是打了几十年的光棍一样&#xff0c;偏偏配不上&#xff0c;n次“相亲”之后图像硬是“阴晴圆缺”&#xff0c;老板阴阳怪气你这打不出来&#xff0c;给客户看之后说&#xff0c;这都打不出来&#xff0c;你们不行啊。 我听了后真想&#xff…
阅读更多...
字节填充与0比特填充以及数据链路的基本问题

字节填充与0比特填充以及数据链路的基本问题

目录 字节填充&#xff1a; 比特填充&#xff1a; 数据链路有三个基本问题 1.封装成帧 2.透明传输 3.差错检测 首先介绍一下PPP的帧结构&#xff1a; 首部的第一个字段和尾部的第二个字段都是标志字段F(Flag)&#xff0c;规定为0x7E (符号“0x”表示它后面的字符是用十六…
阅读更多...
Android低功耗蓝牙开发总结

Android低功耗蓝牙开发总结

基础使用 权限申请 蓝牙权限在各个版本中略有不同 Android 12 及以上版本&#xff0c;如果不需要通过蓝牙来推断位置的话&#xff0c;蓝牙扫描不需要开启位置权Android 11 及以下版本&#xff0c;蓝牙扫描必须开启位置权限Android 9 及以下版本&#xff0c;蓝牙扫描可开启粗…
阅读更多...
弧形导轨和直线导轨的区别

弧形导轨和直线导轨的区别

弧形导轨和直线导轨是两种常见的导轨类型&#xff0c;都具有支撑和引导功能&#xff0c;都可以将运动的能量传递到接收端&#xff0c;实现稳定的运动。那么这两者有什么区别呢&#xff1f; 从结构上来看&#xff0c;直线导轨呈现直线的形状&#xff0c;在机器设备的运动中起到了…
阅读更多...
Java学习苦旅（十八）——详解Java中的二叉树

Java学习苦旅（十八）——详解Java中的二叉树

本篇博客将详细讲解二叉树 文章目录 树型结构简介基本概念表示形式 二叉树概念两种特殊的二叉树二叉树的性质二叉树的存储二叉树的简单创建二叉树的遍历前中后序遍历层序遍历 结尾 树型结构 简介 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09…
阅读更多...
Pytest——Fixture夹具的使用

Pytest——Fixture夹具的使用

一、什么是Fixture 在测试开展的过程中&#xff0c;会需要考虑到测试前的准备工作&#xff0c;以及测试后的释放操作行为。这些在Pytest中&#xff0c;会通过Fixture的方式来实现。如果说在运行pytest的测试用例的时候&#xff0c;需要调用一些数据来实现测试行为&#xff0c;…
阅读更多...
AJAX（三）跨域

AJAX（三）跨域

一、同源策略 同源策略最早由Netscape公司提出&#xff0c;是浏览器的一种安全策略。 同源&#xff1a;协议、域名、端口号必须完全相同。&#xff08;同一个来源&#xff09; 违背同源策略就是跨域。 AJAX发送请求时是默认要遵循同源策略的&#xff0c;不是同源策略&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023