HTML视频无法在生产中播放

编程问答 2023-10-29

问题描述

因此，我在本地计算机上运行了HTML视频。当我访问路线时，它会自动播放，并且我刚刚创建了DigitalOcean Droplet来测试生产中的项目，但视频无法自动播放。这是一个带有Vue.js前端的Laravel项目。这是Vue.js代码：

mounted() {
  this.video = this.$refs.video;
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices
      .getUserMedia({
        video: true
      })
      .then(stream => {
        this.video.srcObject = stream;
        this.video.play();
      });
  }
},
<!DOCTYPE html>
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js" />
</head>

<body>
  <template>
      <video
        ref="video"
        id="video"
        width="100%"
        height="100%"
      /> 
  </template>
</body>

</html>

页面加载后，视频应自动播放。按下绿色按钮应在视频下方的空白处将图像绘制到画布上。

当前，在按下它之后仅存在一个空白空间，这意味着已创建画布，但是没有图像可显示。在Chrome中，它会显示黑屏视频。

这是网站：http://164.90.233.74/vraceni
这是预期的行为：https://imgur.com/xEuQBBZ
这是完整的代码（我不知道JSfiddle的工作方式，但是此代码在本地计算机上运行）：https://jsfiddle.net/xa5L8q1j/1/

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptvideovue.js