uni-app video标签视频在安卓和iOS上均为黑屏且无报错信息

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app video标签视频在安卓和iOS上均为黑屏且无报错信息

测试过的手机:

iphonex(ios版本16.7),红米k60至尊版(Android版本13)

示例代码:

<uni-popup ref="previewRef" type="bottom" background-color="rgba(0,0,0,0.1)">  
    <view class="preview-container">  
        <view class="media-box">  
            <image class="preview-img" :src="form.medias[previewIdx].url" mode="aspectFit" v-show="form.medias[previewIdx].type == 'image'"></image>  
            <video class="preview-video" :src="form.medias[previewIdx].url" controls v-if="form.medias[previewIdx].type == 'video'"></video>  
        </view>  
        <uni-icons class="icon-prev" size="40" color="#fff" type="left" @click="handlePrev"></uni-icons>  
        <uni-icons class="icon-next" size="40" color="#fff" type="right" @click="handleNext"></uni-icons>  
        <uni-icons class="icon-close" type="close" size="40" color="#fff" @click="() => previewRef.close()"></uni-icons>  
    </view>  
</uni-popup>

操作步骤:

  • video的src用的是https://aokerg8937.blob.core.windows.net/aoke/1731863837196.mp4

预期结果:

  • 安卓和ios能正常显示视频内容

实际结果:

  • 安卓和ios视频标签都显示黑屏

bug描述:

视频标签在安卓和ios上显示都是黑屏,运行到web浏览器却是正常的

示例图片1 示例图片2 示例图片3


1 回复

针对您提到的 uni-appvideo 标签在安卓和 iOS 上均为黑屏且无报错信息的问题,这通常可能与视频格式兼容性、视频源地址的访问权限、或者组件本身的某些配置有关。以下是一些可能的解决方案,主要以代码示例的形式展示:

1. 检查视频格式和编码

确保您的视频文件使用的是广泛支持的格式和编码,如 MP4 (H.264 编码)。以下是一个简单的 video 标签使用示例:

<template>
  <view>
    <video
      id="myVideo"
      src="https://example.com/path/to/your/video.mp4"
      controls
      autoplay
      loop
      muted
      show-center-play-btn
      object-fit="contain"
    ></video>
  </view>
</template>

<script>
export default {
  onLoad() {
    // 可以在这里添加一些视频加载或播放状态的监听
    const videoContext = uni.createVideoContext('myVideo');
    videoContext.onPlay(() => {
      console.log('Video is playing');
    });
    videoContext.onError((err) => {
      console.error('Video error:', err);
    });
  }
};
</script>

2. 确认视频源地址的访问权限

确保视频源地址(URL)是公开可访问的,或者如果是在本地服务器或私有网络内,确保您的应用有权限访问该地址。

3. 检查视频标签的属性配置

有时候,某些属性的配置不当也会导致视频无法正常播放。例如,autoplay 属性在某些平台上可能因权限问题被禁用,或者 muted 属性在某些场景下必须设置为 true 才能自动播放。

4. 调试和日志

虽然您提到没有报错信息,但可以通过添加更多的日志输出来帮助定位问题。例如,使用 uni.createVideoContext 来监听视频的各种事件(如播放、暂停、错误等),并打印相关信息。

5. 尝试使用其他视频库

如果问题依旧存在,可以考虑使用其他第三方视频库,比如 uni-app 官方推荐的 u-video 组件,或者通过 web-view 组件嵌入 HTML5 视频播放器。

总结

以上步骤应该能帮助您定位并解决 uni-appvideo 标签在安卓和 iOS 上黑屏的问题。如果问题仍未解决,建议检查视频文件本身是否损坏,或者尝试在不同的设备和浏览器上播放以排除环境因素的影响。

回到顶部