12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- import React, { Component } from 'react';
- // import { DefaultPlayer as Video } from 'react-html5video';
- import { DefaultPlayer as Video } from '../../../dist/index.js';
- import 'react-html5video/dist/styles.css';
- import styles from './App.css';
- import 'reset-css/reset.css';
- import vttEn from './../../assets/sintel-en.vtt';
- import vttEs from './../../assets/sintel-es.vtt';
- import bigBuckBunnyPoster from './../../assets/poster-big-buck-bunny.png';
- import sintelTrailerPoster from './../../assets/poster-sintel-trailer.png';
-
- const sintelTrailer = 'https://download.blender.org/durian/trailer/sintel_trailer-720p.mp4';
- const bigBuckBunny = 'http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_h264.mov';
-
- class App extends Component {
- render () {
- return (
- <div className={styles.component}>
- <header className={styles.header}>
- <h1 className={styles.title}>React HTML5 Video</h1>
- <a className={styles.link}
- href="https://github.com/mderrick/react-html5video">
- View on GitHub »
- </a>
- </header>
- <ul className={styles.videoList}>
- <li className={styles.videoListItem}>
- <Video
- autoPlay
- ref="video1"
- onPlay={() => {
- this.refs.video2.videoEl.pause();
- }}
- onScreenClickCallback={()=>{
- debugger;
- }}
- data-playbackrates={JSON.stringify([{
- id: 0.5, name: '0.5x', mode: 'disabled'
- },{
- id: 0.75, name: '0.75x', mode: 'disabled'
- },{
- id: 1, name: 'Normal', mode: 'showing'
- },{
- id: 1.25, name: '1.25x', mode: 'disabled'
- },{
- id: 1.5, name: '1.5x', mode: 'disabled'
- },{
- id: 2, name: '2x', mode: 'disabled'
- }])}
- poster={sintelTrailerPoster}>
- <source src={sintelTrailer} type="video/mp4" />
- <track
- label="English"
- kind="subtitles"
- srcLang="en"
- src={vttEn}
- default />
- <track
- label="Español"
- kind="subtitles"
- srcLang="es"
- src={vttEs} />
- </Video>
- </li>
- <li className={styles.videoListItem}>
- <Video
- ref="video2"
- onPlay={() => {
- this.refs.video1.videoEl.pause();
- }}
- src={bigBuckBunny}
- poster={bigBuckBunnyPoster}>
- </Video>
- </li>
- </ul>
- </div>
- );
- }
- }
-
- export default App;
|