问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

使用uniapp打包h5后选择或拍摄视频时报错:API `chooseVideo` is not yet implemen，如何解决？

头像
饺子先生
    983149

    使用uniapp打包h5后选择或拍摄视频时报错:API chooseVideo is not yet implemen

    在dev模式下，通过谷歌浏览器是能正常弹出选择对话框，但是发行后就不行，尝试升级最新的Hbuild，问题依然存在，

    uniapp
    阅读 1k
    avatarAI BotBETA

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它允许开发者编写一次代码，发布到多个平台，包括 iOS、Android、H5、以及各种小程序等。然而，由于不同平台的能力差异，一些原生API可能在某些平台上是无法直接使用的。

    针对你的问题，chooseVideo 是用于选择或拍摄视频的API，但在H5平台上，由于浏览器安全限制和HTML5标准本身的能力限制，这个API可能无法直接实现。

    要解决这个问题，你可以考虑以下几种方法：

    1. 使用H5的原生<input type="file">:
      虽然 chooseVideo 可能不支持H5，但你可以使用原生的HTML <input type="file" accept="video/*"> 来让用户选择视频文件。然后你可以使用JavaScript的 FileReader API 来读取和处理这些文件。

      示例代码：

      <input type="file" accept="video/*" capture="camcorder" @change="handleVideoChange">

<script>
export default {
    methods: {
        handleVideoChange(e) {
            let file = e.target.files[0];
            if (file) {
                let reader = new FileReader();
                reader.onload = (e) => {
                    // 你可以在这里处理视频文件，例如上传到服务器
                    console.log(e.target.result);
                };
                reader.readAsDataURL(file);
            }
        }
    }
}
</script>
    2. 使用第三方库或组件:
      你可以查找是否有第三方库或组件为uni-app的H5版本提供了类似的视频选择功能。这些库可能已经处理了浏览器兼容性和安全限制问题。

    3. 条件编译:
      在uni-app中，你可以使用条件编译来根据平台选择不同的代码。对于H5平台，你可以使用上述的原生HTML5方法来处理视频选择；对于其他原生平台（如iOS、Android、小程序等），则可以继续使用 chooseVideo。

      示例代码（使用uni-app的条件编译）：

      <template>
    <view v-if="platform !== 'h5'">
        <!-- 原生平台的代码，使用chooseVideo -->
    </view>
    <view v-else>
        <!-- H5平台的代码，使用<input type="file"> -->
        <input type="file" accept="video/*" capture="camcorder" @change="handleVideoChange">
    </view>
</template>

<script>
// 在这里检查平台
export default {
    data() {
        return {
            platform: uni.getSystemInfoSync().platform // 获取平台信息
        };
    },
    // ... 省略其他方法和代码
}
</script>
    4. 考虑用户体验和平台兼容性:
      不同的平台和设备对于视频录制和选择的支持能力是不同的。因此，在设计和实现这样的功能时，你需要考虑用户体验和平台兼容性。例如，不是所有的浏览器都支持 capture="camcorder" 属性来直接录制视频。

    希望这些方法可以帮助你解决问题。如果你有其他关于uni-app或前端开发的问题，也欢迎随时提问。

    1 个回答
    得票最新
    头像
    墨松
      484321

      原因就是提示的：API chooseVideo is not yet implemen

      对应的API没有实现。

      可以判断一下平台，针对H5场景使用：

      <input type="file" accept="video/*" capture="camcorder" onchange="change()">

      capture:
      user 前置
      environment 后置
      camera 相机
      camcorder 摄像机
      microphone 录音
      filesystem

      太古董的手机，也不兼容，自行评估是否可以放弃古董用户。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏