本文记录HarmonyOS使用xml绘制视频播放控制栏

效果图如下

代码如下

点击查看代码
<?xml version="1.0" encoding="utf-8"?>
<!--依赖布局-->
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#00000000">
<!--子布局:控制区域-->
<DirectionalLayout
ohos:id="$+id:controller_bottom_layout"
ohos:height="80vp"
ohos:width="match_parent"
ohos:align_parent_bottom="true"
ohos:background_element="#88000000"
ohos:left_padding="10vp"
ohos:orientation="vertical"
ohos:right_padding="10vp">
<!--子布局:组件-->
<DependentLayout
ohos:height="0vp"
ohos:width="match_parent"
ohos:weight="2">
<!--上一集-->
<Image
ohos:id="$+id:play_backward"
ohos:height="40vp"
ohos:width="40vp"
ohos:right_margin="20vp"
ohos:left_of="$+id:play_controller"
ohos:padding="10vp"
ohos:image_src="$media:ic_backward"
ohos:scale_mode="stretch"
/>
<!--播放/暂停 按钮-->
<Image
ohos:id="$+id:play_controller"
ohos:height="40vp"
ohos:width="40vp"
ohos:horizontal_center="true"
ohos:image_src="$media:ic_music_stop"
ohos:scale_mode="stretch"
/>
<!--下一集-->
<Image
ohos:id="$+id:play_forward"
ohos:height="40vp"
ohos:width="40vp"
ohos:left_margin="20vp"
ohos:padding="10vp"
ohos:right_of="$id:play_controller"
ohos:image_src="$media:ic_forward"
ohos:scale_mode="stretch"
/>
<!--投屏图片按钮-->
<Image
ohos:id="$+id:tv"
ohos:height="23vp"
ohos:width="23vp"
ohos:align_parent_right="true"
ohos:image_src="$media:ic_tv"
ohos:right_margin="20vp"
ohos:scale_mode="stretch"
ohos:vertical_center="true"
/> </DependentLayout>
<!--子布局:进度-->
<DirectionalLayout
ohos:height="0vp"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:alignment="vertical_center"
ohos:weight="2">
<!--播放时长-->
<Text
ohos:id="$+id:current_time"
ohos:height="match_content"
ohos:width="match_content"
ohos:right_margin="5vp"
ohos:text="00:00:00"
ohos:text_color="#ffffff"
ohos:text_size="12vp"/>
<!--进度条-->
<Slider
ohos:id="$+id:progress"
ohos:height="35vp"
ohos:width="0vp"
ohos:orientation="horizontal"
ohos:progress_color="#FF6103"
ohos:progress_width="5vp"
ohos:weight="1"/>
<!--视频总时长-->
<Text
ohos:id="$+id:end_time"
ohos:height="match_content"
ohos:width="match_content"
ohos:right_margin="5vp"
ohos:text="00:00:00"
ohos:text_color="#ffffff"
ohos:text_size="12vp"/> </DirectionalLayout> </DirectionalLayout> </DependentLayout>

【HarmonyOS】【xml】使用xml绘制视频播放控制栏的更多相关文章

  1. spring基于XML的声明式事务控制

    <?xml version="1.0" encoding="utf-8" ?><beans xmlns="http://www.sp ...

  2. 在web.xml中配置监听器来控制ioc容器生命周期

    5.整合关键-在web.xml中配置监听器来控制ioc容器生命周期 原因: 1.配置的组件太多,需保障单实例 2.项目停止后,ioc容器也需要关掉,降低对内存资源的占用. 项目启动创建容器,项目停止销 ...

  3. spring基于xml的声明式事务控制配置步骤

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  4. video视频标签一些设置,包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件

    video视频标签一些设置,包括封面.播放结束后的封面.视频占满屏幕的方式.视频链接.视频播放暂停.展示控制栏.触发全屏播放事件 <video id="video" auto ...

  5. AndroidStudio中使用XML和Java代码混合控制UI界面实现QQ相册照片列表页面

    场景 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建Androi ...

  6. 腾讯X5内核使用详解(X5内核播放器使用如何去除控制栏全屏播放)以及一些注意事项

    例子下载地址 https://www.lanzous.com/i2zsv5g      GIT就不用了麻烦的不行 本人安卓刚学 就上X5内核弄了老长时间由于对maven 和idea不熟悉刚开始导包都是 ...

  7. Querying Microsoft SQL Server 2012 读书笔记:查询和管理XML数据 1 -使用FOR XML返回XML结果集

    XML 介绍 <CustomersOrders> <Customer custid="1" companyname="Customer NRZBB&qu ...

  8. hadoop三个配置文件的参数含义说明core-site.xml,hdfs-site.xml,mapred-site.xml

    配置hadoop,主要是配置core-site.xml,hdfs-site.xml,mapred-site.xml三个配置文件,默认下来,这些配置文件都是空的,所以很难知道这些配置文件有哪些配置可以生 ...

  9. H5系列之video自己编写控制栏

    首先来了解一下 video, video呢,是H5 的标签,别人说的 H5播放器,没错 就是他了,利用video标签,可以实现视频播放. 但是啊,你会发现,在不同的浏览器上,播放器的 控制栏,都是不一 ...

随机推荐

  1. HDU 5091---Beam Cannon(线段树+扫描线)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5091 Problem Description Recently, the γ galaxies bro ...

  2. C#Winform常引用的库

    1.DevExpress:引用其下的不同DLL,可操作使用不同的控件 2.IrisSkin2:引用对应的DLL后,代码如下 private Sunisoft.IrisSkin.SkinEngine s ...

  3. 2016 Al-Baath University Training Camp Contest-1 I

    Description It is raining again! Youssef really forgot that there is a chance of rain in March, so h ...

  4. PHP 中 Date 函数与实际时间相差8小时的解决方法

    PHP 中的 date() 函数显示的时间是格林威治时间,和北京时间正好相差8个小时,其他时间相关的函数,如 strtotime() 也有相同的问题,同样可以通过下面的方法来解决: 1. 修改php. ...

  5. HTML5的兼容问题以及调用js文件的方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. bootstrap-导航总结

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Spring源码情操陶冶-PropertyPlaceholderBeanDefinitionParser注解配置解析器

    本文针对spring配置的context:property-placeholder作下简单的分析,承接前文Spring源码情操陶冶-自定义节点的解析 spring配置文件应用 <context: ...

  8. flask内容

    Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求进行预处理,然后 ...

  9. [LeetCode_105]Construct Binary Tree from Preorder and Inorder Traversal

    题目链接 https://leetcode.com/problems/construct-binary-tree-from-preorder-and-inorder-traversal/ 题意 由二叉 ...

  10. keystone WSGI流程

    作为OpenStack两种基本的通信方式(RESTful API与消息总线)之中的一个.理解RESTful API的设计思路和运行过程,有助于我们对OpenStack有更好的理解.RESTful仅仅是 ...