如何解决HTML视频无法在生产中播放
因此,我在本地计算机上运行了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 举报,一经查实,本站将立刻删除。