如何使用客戶端庫（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）做出反應？

回答

相關問題