uni-app中video标签的srcObject属性无法使用

uni-app中video标签的srcObject属性无法使用

开发环境 版本号 项目创建方式
Windows 3.99 HBuilderX

操作步骤：

写一个Video标签，然后用navigator.mediaDevices.getUserMedia方法在PC端浏览器进行录制，把获取到的视频流复制给Video标签的srcObject属性，发现报错，无法进行实时预览

预期结果：

预期是在PC浏览器拉起PC端摄像头进行拍摄视频

实际结果：

实际只能拉起摄像头拍摄视频并下载，但是无法再拍摄的时候，进行实时预览

bug描述：

video的srcObject属性无法设置实时预览，但是普通的vue项目在PC端浏览器可以正常预览，现在项目要求必须在PC端浏览器录制视频，所以要用srcObject属性进行预览


更多关于uni-app中video标签的srcObject属性无法使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你是在H5上用，还是APP上用。如果是APP是没有srcObject这个属性的。APP上可以使用renderjs实现。如果是H5，自己创建一个VIDEO标签，再添加你的元素中去。不要使用官方的VIDEO组件，官方的应该被包裹了一个元素的。好像是这样。我忘记了。你通过元素查看代码。找到VIDEO。再拿到这个DOM，直接操作就行了。我最近也是在做视频播放的功能。我做的是WEBRTC播放流。也是试了好多方法，最后使用的是renderjs，因为我还要在APP端播放。

更多关于uni-app中video标签的srcObject属性无法使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 <video> 标签时，srcObject 属性确实无法直接使用。这是因为 uni-app 的 <video> 标签是基于原生平台（如微信小程序、H5、App 等）的 <video> 组件封装的，而 srcObject 属性是 WebRTC 中的特性，用于直接绑定 MediaStream 对象，这在某些平台（尤其是小程序和部分原生 App 环境）中是不支持的。

解决方案

  1. 使用 src 属性： 如果你需要播放视频文件，可以使用 src 属性来指定视频的 URL。例如：

    <video src="https://example.com/path/to/video.mp4" controls></video>

  2. 使用 uni.createVideoContext： 如果你需要动态控制视频播放，可以使用 uni.createVideoContext 来获取视频上下文，并通过 JavaScript 控制视频播放。例如：

    <video id="myVideo" src="https://example.com/path/to/video.mp4"></video>
<button [@click](/user/click)="playVideo">播放</button>

    export default {
  methods: {
    playVideo() {
      const videoContext = uni.createVideoContext('myVideo');
      videoContext.play();
    }
  }
}

  3. 使用 uni.chooseVideo 或 uni.chooseMedia： 如果你需要从本地选择视频文件并播放，可以使用 uni.chooseVideo 或 uni.chooseMedia 来选择视频文件，然后将返回的临时路径赋值给 src 属性。例如：

    <video :src="videoSrc"></video>
<button [@click](/user/click)="chooseVideo">选择视频</button>

    export default {
  data() {
    return {
      videoSrc: ''
    };
  },
  methods: {
    chooseVideo() {
      uni.chooseVideo({
        success: (res) => {
          this.videoSrc = res.tempFilePath;
        }
      });
    }
  }
}
回到顶部