Question

是否有人尝试使用React将VideoJs播放器用作全屏背景视频？

Previoulsy我使用常规的html5 video标记实现了这一点，如此代码笔的教程所示

对于我的其他项目，我需要能够阅读MPEG Dash流视频，我看到它可以轻松使用VideoJS完成，但不能使用常规video标记。

如果没有可能实现这一目标，我可以转移到其他玩家。

那么你们有什么线索或建议吗？

干杯，

贝特朗

编辑：如果我删除了video.js NPM包中提供的video.js/dist/video-js.css css样式表，则视频会全屏显示，但有些有趣但难看的细节（在我的情况下......）显示如此other screenshot

免责声明：

我不打算建立一个花哨的广告网站丑陋的视频广告
我很喜欢React，Videojs并且正在构建前端应用程序

Here is a screenshot showing the bug

和（非工作）代码段：

import React, { Component } from 'react';
import { connect } from "react-redux";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "./MainVideo.css";

export class MainVideo extends Component {

    componentDidMount() {
        this.player = videojs(this.videoNode, {
            autoplay: false,
            controls: false,
            sources: [{
                src: "myFancyVideo.mp4",
                type: 'video/mp4'
            }]
        });
    }
    render() {
        return (
            <div className="fullscreen" div-vjs-player> 
                    <video ref={node => this.videoNode = node} className="video-js"></video>          
            </div>

        );
    }
}

export default MainVideo;

.fullscreen video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
}

使用VideoJS + React的全屏背景视频

0 个答案: