1. 视频播放Begining
首先将需要播放的视频拖入。
![在这里插入图片描述](https://img-blog.csdnimg.cn/0bd781c3eb3349b78cc6401b7041ed85.png#pic_center)
创建Media Player和Media Texture。
![在这里插入图片描述](https://img-blog.csdnimg.cn/f9acc8521fdb4db5930ed8deb5fe51fb.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/77860f1ef57248f49ae03f8461b0db09.png#pic_center)
创建Material,将材质改为User Interface。
![在这里插入图片描述](https://img-blog.csdnimg.cn/405132dc88ca4641901f7077ea254980.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/8f7a312d229142228e8a992b9a2b8584.png#pic_center)
在UI界面,创建Image,将这个材质装入。
![在这里插入图片描述](https://img-blog.csdnimg.cn/072c372917f946a797cdd075af8dd12a.png#pic_center)
在人物Pawn界面添加Media Sound组件并将小电视拖入。
![在这里插入图片描述](https://img-blog.csdnimg.cn/1ddab8bc334949a79c7bf708fb541669.png#pic_center)
在对应UI界面实现对应播放逻辑即可完成播放。
![在这里插入图片描述](https://img-blog.csdnimg.cn/05ab6f47aa2b425e9efec6f5bd7ef5db.png#pic_center)
2. Media Player可以调用的功能
2.1 设置声音大小
注意此处需调用Media Sound的函数,而不是小电视的。
![在这里插入图片描述](https://img-blog.csdnimg.cn/86f3ecf3b7ae48058bb8c2d686cb71ee.png#pic_center)
2.2 设置播放与关闭
![在这里插入图片描述](https://img-blog.csdnimg.cn/3e80880d5a0a414caee26f382dce74d1.png#pic_center)
2.3 拖动进度条
注意:Seek调用太频繁会出现卡顿,不能实现高刷。
![在这里插入图片描述](https://img-blog.csdnimg.cn/66cbb3fe8c4e4585b69459dffb2ff5ec.png#pic_center)
这里的时间可以使用GetTotalXXX转换成秒、毫秒等,用于进度条的计算。
![在这里插入图片描述](https://img-blog.csdnimg.cn/5e828bcafdbb40a99681397aaa137e96.png#pic_center)
2.4 设置播放速率
![在这里插入图片描述](https://img-blog.csdnimg.cn/06ef042bcb9844839543eece94c4be6a.png#pic_center)
2.5 设置是否循环播放
![在这里插入图片描述](https://img-blog.csdnimg.cn/dad032a159944285a42c88dd5eacff46.png#pic_center)
2.6 设置镜像画面
将Image翻转就是镜像,即渲染的X改为-1即可。
![在这里插入图片描述](https://img-blog.csdnimg.cn/12f00b21dd974cacb6bd200205cac80a.png#pic_center)
3. 其它自己实现的功能
3.1 显示播放时间
播放时间实时并更新,在Event Tick中实现。
![在这里插入图片描述](https://img-blog.csdnimg.cn/45a579c120864b4f9ca57d82f740b4f5.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/61c27df0e939461ba5ce9594abe136ff.png#pic_center)
3.2 进度条显示播放画面
使用另一个一样的作为显示画面的容器,并添加到原视频进度条上。
![在这里插入图片描述](https://img-blog.csdnimg.cn/65268baa37544a3b8838350c6f473da3.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/47320040dc1c42b8bce1c6ea65cdc0fa.png#pic_center)
在原视频中,当鼠标悬浮式使用Set Time by Event频繁调用,到达实时画面的效果。
![在这里插入图片描述](https://img-blog.csdnimg.cn/2a0a21800a224ef0a2def3028a69c765.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/07d078a04c7c4818b142cc2e51641e56.png#pic_center)
3.3 显示与隐藏
-
Visable:有物理碰撞且可见
-
Collapsed:折叠,可能会改变原有布局
-
Hidden:隐藏,不会改变原有布局
-
Not Hit-Testable:可见,但没有点击物理碰撞
- 注意:视频功能中有些使用Collapsed,如需要隐藏但不影响布局的碰撞盒子。Hidden,影响布局的盒子。Not Hit-Testable,如视频功能的显示实时播放画面,需要可见且不能有物理碰撞。
![在这里插入图片描述](https://img-blog.csdnimg.cn/5ac9730d43fe424eb132a481520a90f5.png#pic_center)
此处使用一个盒子,对所有相关显隐操作进行清除。
3.4 画中画与全屏
画中画和全屏相对比较简单,都使用同一个Media Mat就可达到同步,只需要传入需要同步的值就行。
![在这里插入图片描述](https://img-blog.csdnimg.cn/031f4625268245eaa19358730d4d3805.png#pic_center)
3.5 视频清晰度
因为Render Target才能调整视频清晰度,而Media Player并不能因此,我们将Media Player不断画到Render Target上,就能调整视频清晰度了。
首先创建Render Target。
![在这里插入图片描述](https://img-blog.csdnimg.cn/e49edb97492046d9bfc63cfbc72633ea.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/a9e3a1658c924a3aa97c2d76546c4302.png#pic_center)
将原来的材质使用Draw Material to Render Target不断Draw到Render Target的材质上。
![在这里插入图片描述](https://img-blog.csdnimg.cn/65c2734c0c974595b1ac48c37b2fbce0.png#pic_center)
使用对应的Render Target材质即为对应的分辨率大小,调整分辨率方式为调整采样。
![在这里插入图片描述](https://img-blog.csdnimg.cn/abab5dbafbd34bdebfc1865aefd187ba.png#pic_center)
4. 最终效果
最终实现了个仿b站的视频播放UI。
![在这里插入图片描述](https://img-blog.csdnimg.cn/b996217c7a2e45f2a11320e9ab012cfe.png#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/27f0d571bbd54d9590e43cb397e4503c.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/b6c601ae8ee84e04a08adfc69d96ba9f.png#pic_center)