web-view播放flv视频

Question

uniapp(微信小程序)播放flv视频(萤石云视频)解决方案(使用web-view组件完美适配).
作者好。
看了您的这篇博文，试着写了一下react版本H5页面。但是在移动端一直爆视频错误。能和您交流学习吗。期待回复。

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

你遇到的问题是 uniapp(微信小程序)中使用 web-view 组件播放 FLV 视频时，移动端总是报错。根据你的描述，这个问题也存在于 React 版本的 H5 页面中。

解决方案：

1. 检查 FLV 视频是否正确：确保 FLV 视频文件正确无误，格式正确，否则可能会导致播放错误。
2. 检查 web-view 组件配置：确保 web-view 组件的配置正确，例如设置了正确的 src 属性，且视频文件路径正确。
3. 检查移动端浏览器支持 FLV 视频播放：移动端浏览器可能不支持 FLV 视频播放，需要使用其他格式的视频文件，例如 MP4。
4. 使用 FLV-to-MP4 转换工具：可以使用 FLV-to-MP4 转换工具将 FLV 视频文件转换为 MP4 格式，然后在 web-view 组件中播放 MP4 视频文件。

代码示例：

<web-view src="mp4视频文件路径"></web-view>

1. 使用 third-party 库：可以使用 third-party 库，例如 flv.js，来播放 FLV 视频文件。这个库可以将 FLV 视频文件转换为 HTML5 视频元素，然后在 web-view 组件中播放。

代码示例：

import flvjs from 'flv.js';

const videoElement = document.getElementById('video');
const flvPlayer = flvjs.createPlayer({
  type: 'flv',
  url: 'flv视频文件路径'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();

这些解决方案可以帮助你解决 uniapp(微信小程序)中使用 web-view 组件播放 FLV 视频时的错误问题。