<template>
<view>
<video :src="src" :poster="poster" object-fit="fill"></video>
</view>
</template>
<script>
export default {
data() {
return {
src: 'https://www.budaos.com/bds/uploads/474182cc-b0db-45dd-90e1-cda620ba9a5d.mp4',
poster: 'https://www.budaos.com/bds/uploads/474182cc-b0db-45dd-90e1-cda620ba9a5d.jpg'
}
},
}
</script>
<style>
</style>
首席烟花引燃师
- 发布：2021-09-29 12:01
- 更新：2021-10-13 16:46
- 阅读：1726
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 20H2
HBuilderX类型： 正式
HBuilderX版本号： 3.2.9
手机系统： iOS
手机系统版本号： iOS 12.4
手机厂商： 苹果
手机机型： iphone6
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
新建uni-app工程，在index.vue中粘贴上述示例代码，目前是用的iphone6手机测试的，发现设置视频第一帧为poster封面图时，点击播放时会明显闪一下黑色再播放视频画面，做不到poster图片和视频无缝过渡，而安卓手机测试时不会出现该问题，过渡很平滑不会出现闪黑问题。
新建uni-app工程，在index.vue中粘贴上述示例代码，目前是用的iphone6手机测试的，发现设置视频第一帧为poster封面图时，点击播放时会明显闪一下黑色再播放视频画面，做不到poster图片和视频无缝过渡，而安卓手机测试时不会出现该问题，过渡很平滑不会出现闪黑问题。
预期结果：
video标签设置视频第一帧为poster封面图时，点击播放后，苹果手机应该能和安卓手机一样都能保持平滑的过渡到视频画面，中间不会闪黑
video标签设置视频第一帧为poster封面图时，点击播放后，苹果手机应该能和安卓手机一样都能保持平滑的过渡到视频画面，中间不会闪黑
实际结果：
苹果手机测试异常，播放视频时会闪一下黑色再播放。
安卓手机测试正常，能平滑的从poster封面图过渡到视频画面。
苹果手机测试异常，播放视频时会闪一下黑色再播放。
安卓手机测试正常，能平滑的从poster封面图过渡到视频画面。
bug描述：
uni-app项目，苹果手机测试，video标签设置视频第一帧为poster封面图时，点击播放时会明显闪一下黑色再播放视频画面，做不到poster图片和视频无缝过渡，而安卓手机测试时不会出现该问题，过渡很平滑不会出现闪黑问题。
天生DR - 天生我材必有用
HX 3.2.10+ 版本已修复此问题
-
首席烟花引燃师 (作者)
请问已经实装好了吗，为啥我升级3.2.10后本地开发测试，和云打包后测试效果还是和以前一样，播放时还是会闪一下黑屏，iphone6，ios12.5真机测试的
2021-10-14 11:19
-
-
-
回复 天生DR: 或者能不能提供一个缓存进度的事件呢，我们监听到缓存出了多少秒然后才调用播放。目前上了CDN且确保不是回源返回的，但黑屏还是很明显，且绝大部分都是的，手机网络是正常的。
2021-10-31 11:15
-
回复 h***@hongfs.cn: video模块 我们也是用了第三方开源的ijkplayer 一些高层封装的状态 他对外也没有那么细 另外音视频这块知识过于庞大 video 我们提供了 高级的设置一些 参数 具体你可以看下这个 例如改小缓冲空间 你看看这一偏 https://ask.dcloud.net.cn/article/39136
2021-11-01 11:22
makeit
android nvue页面，第一次加载video正常播放，然后动态修改video播放地址，video就黑屏了。
只能把video关掉，再用新地址开启video 才能播放
2021-11-11 23:29