VideoJs.js (2197B)
1 import React from 'react'; 2 import videojsHls from 'videojs-contrib-hls'; 3 4 export default class VideoPlayer extends React.Component { 5 componentDidMount() { 6 // instantiate video.js 7 this.player = videojs(this.videoNode, this.props, () => { 8 console.log('ready'); 9 }); 10 this.player.qualityselector({ 11 sources: [ 12 { format: 'highres', src: 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4', type: 'video/mp4' }, 13 { format: 'hd1080', src: 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4', type: 'video/mp4' }, 14 { format: 'hd720', src: 'http://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_1mb.mp4', type: 'video/mp4' }, 15 { format: 'large', src: '//vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4' }, 16 { format: 'medium', src: 'http://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_1mb.mp4', type: 'video/mp4' }, 17 { format: 'small', src: 'http://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_1mb.mp4', type: 'video/mp4' }, 18 { format: 'auto', src: 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4', type: 'video/mp4' }, 19 ], 20 formats: [ 21 { code: 'highres', name: 'High' }, 22 { code: 'hd1080', name: '1080p' }, 23 { code: 'hd720', name: '720p' }, 24 { code: 'large', name: '480p' }, 25 { code: 'medium', name: '360p' }, 26 { code: 'small', name: '240p' }, 27 { code: 'auto', name: 'Auto' }, 28 ], 29 30 onFormatSelected: (format) => { 31 console.log(format); 32 }, 33 }); 34 this.player.ready(() => { 35 this.hotkeys({ 36 volumeStep: 0.1, 37 seekStep: 5, 38 }); 39 }); 40 } 41 42 // destroy player on unmount 43 componentWillUnmount() { 44 if (this.player) { 45 this.player.dispose(); 46 } 47 } 48 49 // wrap the player in a div with a `data-vjs-player` attribute 50 // so videojs won't create additional wrapper in the DOM 51 // see https://github.com/videojs/video.js/pull/3856 52 render() { 53 return ( 54 <div data-vjs-player> 55 <video ref={node => this.videoNode = node} className="video-js vjs-default-skin" controls /> 56 </div> 57 ); 58 } 59 }