Css视频背景不起作用

Question

技术： ReactJS、SAAS。

我想要的：在后台自动播放、静音、循环播放的视频。

我的问题：当我从带有示例视频的示例上传代码时，一切都按预期工作。问题是我想在背景中有另一个视频。我尝试将它放在 vimeo 上并从我的计算机上使用它，但这些选项都不起作用。当我使用 vimeo 提供的 URL 时，不会呈现任何内容，也没有看到任何错误或控制台警告。视频也不会出现在元素中。当我从我的电脑上传它时，我得到了错误：

GET http://localhost:8888/book.mp4 404

或者当使用整个文件路径时

Not allowed to load local resource: file:///C:/pathToFile

反应代码

import React, {Component} from 'react';

import styles from './Share.scss'

class Share extends Component {
    render() {
        return (
            <div className={styles.layout}>
                <video className={styles.background_video}  autoPlay loop muted>
                    <source src="https://player.vimeo.com/video/239482445"
                            type="video/mp4"/>
                    <source src="https://player.vimeo.com/video/239482445"
                            type="video/ogg"/>
                    Your browser does not support the video tag.
                </video>
                </div>
    )}
}

export default Share;

SCSS

.background_video{
  height: 100%;
  width: 100%;
  float: left;
  top: 0;
  padding: none;
  position: fixed; 
}

Answer 1

您正在尝试提供完整的 html Vimeo 页面作为视频源（检查 https://player.vimeo.com/video/239482445 返回的内容）。这永远不会起作用，因为<video> 中的 HTML 标记 <source> 必须获得指向实际视频的链接，而不是另一个 html 页面。

您可以从这里开始有两种方式。

1. 将实际视频链接添加到 src 属性。例如，<source src="http://www.coverr.co/s3/mp4/Vacay_Mode.mp4" type="video/mp4"/>

2. 在 iframe 中加载 Vimeo 链接并处理其 API 以删除所有按钮和不必要的内容，例如用户头像。顺便说一句，Vimeo 将这些 API 选项作为付费功能。

只是为了节省您一些时间 - 选项 #2 也有问题。 Vimeo 会调整视频的宽度和高度以适应屏幕，因此它不会是真正的封面视频，并且如果视频比例不是 100% 匹配屏幕比例，视频周围会出现黑色钻孔。

如果您想从静态文件夹加载视频，则必须运行 Express 等服务器。如果我没记错的话，它将无法通过您的本地文件系统请求访问。