クライアントサイドライブラリ（video.js）を反応させるにはどうすればよいですか？

こんにちは私はのVideoPlayerとして（http://videojs.com/を参照）にVideo.jsを使用しようとしている、とドキュメントを追加すると言う：私のアプリケーションへクライアントサイドライブラリ（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>

ビデオコンポーネント： index.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内のリンクを含めます

<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ページのheadタグ（https://www.npmjs.com/package/video.jsを参照）にスクリプト/リンクタグを追加するための説明ですが、これは動作するオプションではないようです反応すると – mdash1

クライアントサイドライブラリ（video.js）を反応させるにはどうすればよいですか？

答えて

関連する問題