-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
30 lines (29 loc) · 7.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title data-react-helmet="true">Video-React - React Video Component</title>
<meta data-react-helmet="true" name="description" content="Video-React is a web video player built from the ground up for an HTML5 world using React library."/><meta data-react-helmet="true" property="og:type" content="article"/>
<link rel=icon href=/assets/favicon.ico>
<link rel="stylesheet" href="/assets/main.css"/>
<link rel="stylesheet" href="/assets/docs.css"/>
</head>
<body>
<div id="app"><div class="wrapper" data-reactroot=""><nav class="header navbar navbar-expand-md navbar-light bg-faded"><div class="container"><button type="button" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button><a class="mr-auto navbar-brand" href="/">Video-React</a><div class="collapse navbar-collapse"><ul class="ml-sm-auto navbar-nav"><li class="nav-item"><a class="nav-link nav-link" href="/customize/">Customize</a></li><li class="nav-item"><a class="nav-link nav-link" href="/components/">Components</a></li><li class="nav-item"><a href="https://github.com/video-react/video-react" class="nav-link">Github</a></li></ul></div></div></nav><div><section class="jumbotron-header text-center mb-3 jumbotron"><div class="container"><div class="row"><div class="col"><p class="lead"><img src="/assets/logo.png" alt="" width="150px"/></p><h1 class="jumbotron-heading display-4">Video-React</h1><p class="lead">The web video player built from the ground up for an HTML5 world using React library.</p><p><a href="https://github.com/video-react/video-react" class="btn btn-outline-danger">View on Github</a><a class="btn btn-danger" href="/components/">View Components</a></p></div></div></div></section><div class="container-fluid"><div class="row"><div class="col-sm-8 offset-sm-2"><h2>Installation</h2><hr/><h3>NPM</h3><p>Install video-react and peer dependencies via NPM</p><pre><code class="language-bash">npm install --save video-react react react-dom redux</code></pre><h3>Basic example</h3><p>The basic player</p><div class="docs-example"><div class="video-react-controls-enabled video-react-paused video-react-fluid video-react-user-active video-react-workinghover video-react" style="padding-top:56.25%" role="region" tabindex="-1"><video class="video-react-video" preload="auto" playsinline="" poster="/assets/poster.png" src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" tabindex="-1"></video><div class="video-react-poster" style="background-image:url("/assets/poster.png")"></div><div class="video-react-loading-spinner"></div><button class="video-react-button video-react-big-play-button video-react-big-play-button-left big-play-button-hide" type="button" aria-live="polite" tabindex="0"><span class="video-react-control-text">Play Video</span></button><div class="video-react-control-bar video-react-control-bar-auto-hide"><button class="video-react-play-control video-react-control video-react-button video-react-paused" type="button" tabindex="0"><span class="video-react-control-text">Play</span></button><div class="video-react-volume-menu-button-horizontal video-react-vol-3 video-react-volume-menu-button video-react-menu-button-inline video-react-control video-react-button video-react-menu-button" role="button" tabindex="0"><div class="video-react-menu"><div class="video-react-menu-content"><div class="video-react-volume-bar video-react-slider-bar video-react-slider-horizontal video-react-slider" tabindex="0" role="slider" aria-label="volume level" aria-valuenow="100.00" aria-valuetext="100.00%" aria-valuemin="0" aria-valuemax="100"><div class="video-react-volume-level" style="width:100.00%"><span class="video-react-control-text"></span></div></div></div></div></div><div class="video-react-current-time video-react-time-control video-react-control"><div class="video-react-current-time-display" aria-live="off"><span class="video-react-control-text">Current Time </span>0:00</div></div><div class="video-react-time-control video-react-time-divider" dir="ltr"><div><span>/</span></div></div><div class="video-react-duration video-react-time-control video-react-control"><div class="video-react-duration-display" aria-live="off"><span class="video-react-control-text">Duration Time </span>0:00</div></div><div class="video-react-progress-control video-react-control"><div class="video-react-progress-holder video-react-slider-horizontal video-react-slider" tabindex="0" role="slider" aria-label="video progress bar" aria-valuenow="NaN" aria-valuetext="0:00" aria-valuemin="0" aria-valuemax="100"><div data-current-time="0:00" class="video-react-play-progress video-react-slider-bar" style="width:NaN%"><span class="video-react-control-text">Progress: NaN%</span></div></div></div><button class="video-react-icon-fullscreen video-react-fullscreen-control video-react-control video-react-button video-react-icon" type="button" tabindex="0"><span class="video-react-control-text">Non-Fullscreen</span></button></div></div></div><p>import css in your app or add video-react styles in your page</p><pre><code class="language-jsx">import "node_modules/video-react/dist/video-react.css"; // import css</code></pre><pre><code class="language-jsx">@import "~video-react/styles/scss/video-react"; // or import scss</code></pre><pre><code class="language-html"><link rel="stylesheet" href="/css/video-react.css" /></code></pre><pre><code class="language-jsx">import React from 'react';
import { Player } from 'video-react';
export default props => {
return (
<Player
playsInline
poster="/assets/poster.png"
src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
/>
);
};
</code></pre><h2 class="m-t-3">Development</h2><hr/><p>Install dependencies:</p><pre><code class="language-bash">npm install</code></pre><p>Run examples at<!-- --> <a href="http://localhost:9000/" target="_blank">http://localhost:9000/</a> <!-- -->with webpack dev server:</p><pre><code class="language-bash">npm start</code></pre><p>Run tests & coverage report:</p><pre><code class="language-bash">npm test</code></pre></div></div></div></div><div class="footer"><div class="container"><div class="row"><div class="text-center col"><p class="social"><iframe src="https://ghbtns.com/github-btn.html?user=video-react&repo=video-react&type=star&count=true" frameBorder="0" scrolling="0" width="100" height="20px"></iframe><iframe src="https://ghbtns.com/github-btn.html?user=video-react&repo=video-react&type=fork&count=true" frameBorder="0" scrolling="0" width="100" height="20px"></iframe><a href="https://js.org" target="_blank" title="JS.ORG | JavaScript Community"><img src="https://logo.js.org/dark_horz.png" height="20" alt="JS.ORG Logo"/></a></p></div></div></div></div></div></div>
<script src="/assets/prism.js" data-manual></script>
<script src="/bundle.js"></script>
</body>
</html>