Question

技术：ReactJS，SAAS。

我想拥有的内容：在后台播放自动播放，静音，循环播放的视频。

我的问题：当我使用sample-video从一些示例上传代码时，一切都按预期工作。问题是我想在后台播放另一个视频。我尝试将它放在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返回的内容）。这永远不会起作用，因为<source>中的HTML标记<video>必须获得指向实际视频的链接，而不是另一个html网页。

你可以从这里走两种方式。

将实际视频链接添加到src属性。例如，<source src="http://www.coverr.co/s3/mp4/Vacay_Mode.mp4" type="video/mp4"/>
在iframe中加载Vimeo链接并处理其API以删除所有按钮和不必要的内容，例如用户头像。 Vimeo将这些API选项作为付费功能btw。

为了节省您的时间 - 选项＃2也存在问题。 Vimeo将调整视频的宽度和高度以适应屏幕，因此它不会成为真正的封面视频，并且如果视频比率不是100％匹配屏幕比率，则会在视频周围出现黑蛀虫。

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

Css视频背景不工作

1 个答案: