uni-app的app端 video组件是否支持MJPEG视频格式？还是说只能是mp4的?

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

uni-app的app端 video组件是否支持MJPEG视频格式？还是说只能是mp4的?

uniapp的 video组件支持 MJPEG 视频吗? 还是说只能是mp4的?

有没有支持 MJPEG 视频的思路方法呢?

Harmonyos Next教程
5 回复

看你是什么端，h5端一般视浏览器而定 小程序得看各平台的支持


那有没有什么办法可以处理app端的MJPEG 播放吗?

回复 南黎2024: 你可以试试嵌入个webview，h5里写个video，你试试行不

回复 套马杆的套子: app啊 用了webview就会全屏了```不能全屏 希望做成 原生video的那种效果

在探讨uni-app的app端video组件是否支持MJPEG视频格式之前，我们需要了解MJPEG和MP4这两种视频格式的本质区别。MJPEG（Motion JPEG）是一种基于静态JPEG格式的视频压缩技术，它将一系列JPEG图像连续播放形成视频。而MP4（MPEG-4 Part 14）则是一种广泛使用的多媒体容器格式，支持多种编码的视频和音频流。

现在，直接针对uni-app的video组件，官方文档主要提及支持的视频格式包括MP4、WebM等，但并没有明确提到MJPEG格式的支持情况。不过，根据HTML5 video标签的兼容性历史，MJPEG格式的支持并不普遍，因为它本质上是一系列JPEG图片的序列，而不是传统意义上的“视频”。

在uni-app的实践中，我们可以尝试编写代码来验证video组件对MJPEG的支持情况。以下是一个简单的代码示例，假设我们有一个MJPEG视频流的URL：

<template>
  <view>
    <video
      id="video"
      src="http://example.com/mjpeg-stream"
      controls
      autoplay
      style="width: 100%; height: auto;"
    ></video>
  </view>
</template>

<script>
export default {
  onLoad() {
    // 这里可以添加一些逻辑来处理视频加载或错误事件
    const video = uni.createSelectorQuery().select('#video');
    video.fields({ node: true, size: true }).exec((res) => {
      const videoContext = res[0].node;
      videoContext.onError((err) => {
        console.error('视频加载出错:', err);
      });
    });
  },
};
</script>

<style>
/* 样式可以根据需要调整 */
</style>

在上述代码中，我们尝试将一个MJPEG视频流的URL赋给video组件的src属性。然而，根据uni-app和底层浏览器引擎（如WebView）对MJPEG的支持情况，这段代码可能无法正常工作。如果video组件不支持MJPEG格式，你可能会在控制台中看到加载错误的日志。

为了处理MJPEG流，一种可能的替代方案是使用<image>标签配合JavaScript定时器不断更新图片的src属性来模拟视频播放效果。但这种方法在性能和资源使用上可能不如直接使用video组件高效。

综上所述，虽然uni-app的video组件没有明确说明支持MJPEG格式，但根据HTML5 video标签的兼容性以及uni-app的文档和实践经验，我们可以合理推测它可能不支持MJPEG格式。在实际开发中，如果遇到需要播放MJPEG流的场景，可能需要考虑其他技术方案或寻找第三方库的支持。

回到顶部