我有两个组件-> a) VideoJSPlayer和b) VideosPage。
顾名思义,VideoJsPlayer有视频播放器部分(使用视频As ),VideosPage使用VideoJsPlayer组件显示视频。
每个组件的代码是:
( a) VideoJsPlayer
import React, { useEffect } from "react";
import videojs from "video.js";
const VideoJsPlayer = props => {
let player = null;
let vide
我想把一个图像作为背景图像,像视频组件,登录组件,底部组件浮动在它上面的多个组件。react上的代码模式是什么,因为我是新手。所有的视频组件和其他组件都放在这里。代码如下: import React from 'react'
import Video from './Video.js'
import './Home.css'
import logo from './images/background.png'
function Home() {
return (
<div
这里是沙箱链接:
我使用video.js在react项目中显示视频,并将其导入到我的<VideoPlayer/>组件中。
现在我想用react-loadable来包装<VideoPlayer/>,因为video.js太大了。
但是当我访问我正在运行的项目中的实际视频播放器时,该项目崩溃了,并且我在浏览器的控制台中收到了一些错误消息:
react-dom.development.js:57 Uncaught Invariant Violation: Element type is
invalid: expected a string (for built-in compo
这是我想要达到的目标。每当用户单击另一个component时,我都试图更新component中的值。看看我的代码
这是我的app.component.html文件
<div class="col-sm" *ngFor="let tabs of videoTabs">
<!-- this is where i want the user to click on -->
<div class="tabs hvr-back-pulse">
<di