uni-app中h5使用video组件在苹果微信游览器无法正常显示视频时长但点击可正常播放

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

uni-app中h5使用video组件在苹果微信游览器无法正常显示视频时长但点击可正常播放

产品分类：

uniapp/H5

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

windows10

HBuilderX类型：

正式

HBuilderX版本号：

4.29

浏览器平台：

微信内置浏览器

浏览器版本：

微信游览器

项目创建方式：

HBuilderX

示例代码：

<template>  
    <view class="content">  
        <video src="../../static/test.mp4"></video>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>

操作步骤：

<template>  
    <view class="content">  
        <video src="../../static/test.mp4"></video>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>

预期结果：

可以正常显示时长

实际结果：

显示00:00

bug描述：

打包为h5在 使用苹果在微信游览器打开 视频时长为00:00 安卓手机正常显示

Image


Harmonyos Next教程
4 回复

你用html去试试看看是否正常，因为uniapp打包到h5video标签是用的原生的。。看看是你视频路径不对还是什么


跟路径没关系 ios在微信环境无法正常显示视频时间，点击是可以播放的

回复 冬眠: 好吧

在uni-app中使用<video>组件时，确实可能会遇到一些浏览器兼容性问题，特别是在苹果设备的微信内置浏览器中。针对你提到的视频时长无法正常显示的问题，虽然无法直接通过配置或简单属性解决，但我们可以通过一些编程技巧来规避或改善用户体验。

以下是一个可能的解决方案，通过JavaScript手动获取视频时长信息，并在页面上显示。由于视频时长需要在视频元数据加载完成后才能获取，我们需要监听loadedmetadata事件。

<template>
  <view class="container">
    <video
      id="myVideo"
      src="your-video-url.mp4"
      controls
      @loadedmetadata="onVideoMetadataLoaded"
    ></video>
    <view v-if="videoDuration !== null">视频时长: {{ videoDuration }} 秒</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoDuration: null, // 用于存储视频时长
    };
  },
  methods: {
    onVideoMetadataLoaded(event) {
      const videoElement = document.getElementById('myVideo');
      this.videoDuration = videoElement.duration.toFixed(2); // 获取视频时长并保留两位小数
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
}
video {
  width: 100%;
  max-width: 600px;
  margin-bottom: 20px;
}
</style>

在这个例子中，我们做了以下几件事：

  1. 使用<video>组件并绑定loadedmetadata事件。
  2. 当视频元数据加载完成时，触发onVideoMetadataLoaded方法。
  3. 在onVideoMetadataLoaded方法中，通过document.getElementById获取视频元素，并读取其duration属性。
  4. 将获取到的视频时长存储到组件的data中，并在页面上显示。

注意：

  • your-video-url.mp4应替换为你的实际视频URL。
  • loadedmetadata事件在视频元数据（如时长、尺寸等）加载完成后触发，这是获取视频时长的最佳时机。
  • 使用toFixed(2)将时长格式化为两位小数，提高显示的可读性。

通过这种方式，即使苹果微信浏览器无法直接显示视频时长，我们也能通过手动获取和显示来提供这一信息，从而改善用户体验。

回到顶部