如何使用客户端库（video.js）做出反应？

嗨，我试图用的Video.js（见http://videojs.com/）作为录像机，以及文档说补充：如何使用客户端库（video.js）做出反应？

"<link href="//vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">"

和

"<script src="//vjs.zencdn.net/5.19/video.min.js"></script>"

我的应用程序。我如何在反应中使用它？

而且，在我的公开/ index.html的：

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 
    <meta name="theme-color" content="#000000"> 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> 
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 
    <link href="//vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet"> 
    <title>Digitizing POC</title> 
    </head> 
    <body> 
    <noscript> 
     You need to enable JavaScript to run this app. 
    </noscript> 
    <div id="root"></div> 

    <script src="//vjs.zencdn.net/5.19/video.min.js"></script> 
    </body> 
</html>

视频组件：

componentDidMount() { 
    let that = this; 
    let player = videojs('my-player', options, function onPlayerReady() { 
      this.on('canplay',()=>{ 
      console.log("can play)"; 
      })   
    }); 

} 



Error in browser: 
Failed to compile 
/src/components/videoplayer.js 
    Line 41: 'videojs' is not defined no-undef

来源

2017-08-17 mdash1

包括在你的React应用程序的index.html

EDIT链接： index.html：

<head> 
    <link href="//vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet"> 
    <script src="//vjs.zencdn.net/5.19/video.min.js"></script> 
</head>

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

const App =() => { 
return (<video 
    id="my-player" 
    class="video-js" 
    controls 
    preload="auto" 
    poster="//vjs.zencdn.net/v/oceans.png" 
    data-setup='{}'> 
    <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source> 
    <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source> 
    <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source> 
    <p class="vjs-no-js"> 
    To view this video please enable JavaScript, and consider upgrading to a 
    web browser that 
    <a href="http://videojs.com/html5-video-support/" target="_blank"> 
     supports HTML5 video 
    </a> 
    </p> 
    </video> 
); 
} 

ReactDOM.render(<App />, document.querySelector('.container'));

来源

2017-08-17 18:05:17 koolkat

对不起，应该已经提到，我在我的index.html包括它，我已经澄清我的问题了一下，你可以再看看，看看我是什么做错了@saishreb – mdash1

尝试获取videojs'npm'包。 'npm install --save-dev video.js'。 – koolkat

该文件说，将脚本/链接标签添加到html页面的头标签（请参阅https://www.npmjs.com/package/video.js），这似乎不是一个有效的选项与反应 – mdash1

如何使用客户端库（video.js）做出反应？

回答

相关问题