Code Monkey home page Code Monkey logo

video-react's Introduction

video-react

npm version Package Quality codecov

Video.React is a web video player built from the ground up for an HTML5 world using React library.

✨ The future of Video.React

Maintenance of Video.React is being taken over by Mux. The team at Mux have worked on many highly respected projects and are committed to improving video tooling for developers.

Video.React will remain open source, but with a higher rate of fixes and releases over time. Thanks to everyone in the community for your ongoing support.

Installation

Install video-react and peer dependencies via NPM

npm install --save video-react react react-dom

import css in your app or add video-react styles in your page

import '~video-react/dist/video-react.css'; // import css

or

@import '~video-react/styles/scss/video-react'; // or import scss

or

<link
  rel="stylesheet"
  href="https://video-react.github.io/assets/video-react.css"
/>

Import the components you need, example:

import React from 'react';
import { Player } from 'video-react';

export default props => {
  return (
    <Player>
      <source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
    </Player>
  );
};

Browser support

Browser Windows Mac Linux Android iOS
Chrome Y Y Y Y Native
Firefox Y Y Y untested Native
Edge Y - - - -
IE 11 untested - - - -
Safari - Y - - Y

Please note that only the latest stable version is tested and supported. Video-react may be usable in older releases, and we will accept pull requests for them, but they will not be frequently tested or actively supported.

For the items marked as "untested", we do welcome volunteer testers.

Development

Run tests:

npm test

Run from local

$ npm install
$ npm start

Contribution

Interested in making contribution to this project? Want to report a bug? Please read the contribution guide.

Inspiration & Credits

video-react's People

Contributors

arsduo avatar chasemaier avatar christophebougere avatar cmoran-vt avatar codereviewvideos avatar el-j avatar foreverbean avatar heff avatar jhockett avatar jimliu avatar joselycas avatar juandjara avatar kulakowka avatar luwes avatar mondaychen avatar pavlyutkin avatar rart avatar rogaldh avatar soulfull avatar sunjing1809 avatar thesheepking avatar tomaswitek avatar vipakun avatar xiaoyuhen avatar xincun-li avatar xuwaters avatar yc850k avatar yuheiy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

video-react's Issues

播放器自动全屏

你好,现在有一个需求是,我这边监听到横屏或竖屏后自动全屏播放,请问有没有暴露全屏的接口呢,比如说this.refs.player.fullscreen

谢谢

unable to resolve redux module

Webpack unable to resolve redux. Because the packages directory is react-redux. To solve this issue, please replace react-redux to redux in the packages.json

  • version #0.9.8
  • webpack: 2.0
ERROR in ./~/video-react/lib/Manager.js
Module not found: Error: Can't resolve 'redux/lib/createStore' in '/project/app/node_modules/video-react/lib'

Replay/Froward Control - Triggers New HTTP Requests

Hi there, I hope this finds you well.

We're serving restricted access content with video-react, requiring pre-signed URLs (with short expire times - 10sec ) to give users access. When the video is playing and a user watches thru, everything is fine. When the user tries to fast forward or replay backward - clicking the Replay or Forward buttons a few times in succession - a new HTTP request is made to the video. In our case this fails because the URL has now expired.

  • version #0.7.3
  • browser: Chrome 57.0.2987.98

Steps to reproduce issue

Play a video using below settings - hit fastforward or rewind buttons in quick success. In this case, it was an 1hr MP4 video

Steps to reproduce

                    <Player ref="player" 
                            muted       = {muted} 
                            autoPlay    = {autoPlay} 
                            startTime   = {startTime} 
                            >
                        <BigPlayButton position="center" />
                        <source src={videoSrc} />
                        <LoadingSpinner /> 
                        <ControlBar autoHide={false} >
                            <ReplayControl seconds={10} order={1.1} />
                            <ForwardControl seconds={10} order={1.2} />
                            <CurrentTimeDisplay order={4.1} />
                            <TimeDivider order={4.2} />
                            <PlaybackRateMenuButton
                                rates={[0.25, 0.5, 1, 1.25, 1.5]}
                                order={7.1}
                            />
                            <VolumeMenuButton vertical={true} />
                        </ControlBar>
                        <Shortcut shortcuts={this.newShortcuts} />
                    </Player>

Expected behaviour

Expect no additional HTTP request to be made to (unless video is a multipart HLS stream).

Actual behaviour

Multiple HTTPS requests being made on video fastforward and rewind

Disable full screen funcationality

Hi is there any way to stop the full screen functionality in video react 0.7.8 version. I want that user should not be able to view full screen mode

PlaybackRate Issue - Negative rate has no effect

Hi there, have encountered three issues with the playback rate - will create separate issues for each. let me know if this is preferred or if in future you would prefer them bundled in one ticket.

And thanks again for your ongoing work on this. My team is going forward with video-react because its such a high quality rollout, your responsiveness to issues is awesome and your focused on the main features - making video run awesomely!

Issue: The PlaybackRate in the below code, the negative values have no effect. (tho the positive values do). Perhaps I am doing something wrong?

  • version #0.6.4
  • browser: Latest chrome, firefox

Steps to reproduce issue

                <Player 
                  ref="player" 
                  muted={this.props.playerState.muted} 
                  autoPlay={this.props.playerState.autoPlay} 
                  startTime={this.props.playerState.startTime} 
                  videoWidth="634"
                  videoHeight="356" >
                    <BigPlayButton position="center" />
                    <source src={this.props.playerState.videoURL} />
                    <LoadingSpinner /> 
                    <ControlBar autoHide={false} >
                        <ReplayControl seconds={10} order={1.1} />
                        <ForwardControl seconds={10} order={1.2} />
                        <CurrentTimeDisplay order={4.1} />
                        <TimeDivider order={4.2} />
                        <PlaybackRate
                          rates={[-2, -1, 1, 1.25, 1.5, 2]}
                          order={7.1}
                        />
                        <VolumeMenuButton vertical={true}  />                 
                    </ControlBar>
                    <Shortcut shortcuts={this.newShortcuts} />
                  </Player>

Steps to reproduce

  1. Use the above code to create player instance
  2. Select -ve rate - nothing changes.
  3. Select a higher playback rate - rate increases
  4. Select -ve rate - nothing change.
  5. Select 1.00 rate - rate changes

Expected behaviour

When negative rate is selected, rate slows down.

Actual behaviour

When negative rate is selected, nothing happens

Thank you!
Paola

Getting height and width from state

I've been trying to get the player height & weight with this code snippet

let {player : playerState} = this.player.getState();
let { currentTime, height, width } = playerState;

But it always give me 0 even though the player have height & width, this is my player

<Player ref={(player) => {this.player = player}} autoPlay fluid>
  <HLSSource
      isVideoChild
      src={video.play_url}
  />
</Player>

Or is it only can get the height & width that I set via props?

我们的项目里面里面也要配置sass编译吗

我们的项目里面里面也要配置sass编译吗

上周五,lib/index.js 文件第8行增加 require('../styles/scss/video-react.scss');
这样的话我们的项目里面
import { Player, ControlBar } from 'video-react';
如果我们的webpack里面没有配置sass的话,就会报错。
所以我建议删除 lib/index.js 文件第8行 require('../styles/scss/video-react.scss');
并在package.json里面加入
"style": "dist/video-react.min.js",

Not working in IE11 on Windows 7

This plugin is not working at all in IE11 on Windows 7.
I've tried the installation guide on https://video-react.js.org/ and it doesn't work.

It work on Chrome, but not in IE11.
The app compile correctly. I'm using create-react-app to start a boilerplate projet.

Step to reproduces

Type these command into a Terminal window

  1. create-react-app my-app
  2. cd my-app
  3. npm install --save video-react redux
  4. npm start

Edit src/App.js to

import React, { Component } from 'react';
import { Player } from 'video-react';
import logo from './logo.svg';
import './App.css';
import "./node_modules/video-react/dist/video-react.css";

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Player playsInline autoPlay src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4" />
      </div>
    );
  }
}

export default App;

Save the file and view result in your browser

Uncaught DOMException user performs seek operations when the video state waiting is true

Issue description

  • version #0.8.8
  • browser: chrome

Steps to reproduce issue

Steps to reproduce

  1. go to https://video-react.js.org/customize/customize-source/
  2. perform seek operations by clicking on the video control bar at the portion where the video is not yet loaded into the buffer.
  3. At this time, the player state will become waiting and user shall see the waiting circle displayed.
  4. perform a seek operation to the portion where the video is not yet loaded again..

Expected behaviour

It should not perform seek operation when player state is waiting.

Actual behaviour

Got this error
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22
Promise (async)
play @ Video.js:151
play @ player.js:35
(anonymous) @ Manager.js:26
handleMouseUp @ SeekBar.js:73
handleMouseUp @ Slider.js:117

attribute width and height is not working

width number - Video width
height number - Video height

As per doc these attribute doesnot work or say there is no changes on video width and height..

<Player playsInline width={100} height={50}>
<source src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"/>
<ControlBar>
    <PlaybackRateMenuButton rates={[2,1.5,1]} order={7.1} />
    <VolumeMenuButton disabled />
</ControlBar>
</Player>

PlaybackRate - CurrentTimeDisplay inconsistant counting

When playback rate is increase, the CurrentTimeDisplay counts inconsistently - speads up then slows down then speadsup, etc.

  • version #0.6.4
  • browser: Latest chrome, firefox

Steps to reproduce issue

                <Player 
                  ref="player" 
                  muted={this.props.playerState.muted} 
                  autoPlay={this.props.playerState.autoPlay} 
                  startTime={this.props.playerState.startTime} 
                  videoWidth="634"
                  videoHeight="356" >
                    <BigPlayButton position="center" />
                    <source src={this.props.playerState.videoURL} />
                    <LoadingSpinner /> 
                    <ControlBar autoHide={false} >
                        <ReplayControl seconds={10} order={1.1} />
                        <ForwardControl seconds={10} order={1.2} />
                        <CurrentTimeDisplay order={4.1} />
                        <TimeDivider order={4.2} />
                        <PlaybackRate
                          rates={[-2, -1, 1, 1.25, 1.5, 2]}
                          order={7.1}
                        />
                        <VolumeMenuButton vertical={true}  />                 
                    </ControlBar>
                    <Shortcut shortcuts={this.newShortcuts} />
                  </Player>

Steps to reproduce

  1. Use the above code to create player instance
  2. Select a higher playback rate and observe the CurrentTimeDisplay

Expected behaviour

CurrentTimeDisplay should consistently count elapsed time - ie, increment in a consistent manner

Actual behaviour

CurrentTimeDisplay is incrementing inconsistently

Note: I have a listener on current time - perhaps this is impacting it. if you cannot reproduce your side, perhaps its my listener having a negative imapct.

ControlBar className from property doesnt appear

Steps to reproduce

  1. add className to the controlbar <ControlBar className="my-class"></ControlBar>

Expected behaviour

Then in the control bar div should appear my-class

Actual behaviour

in control bar appear class "className" like <div class="className"...

Unknown prop `playsInline` on <video> tag

Issue description

  • version 0.6.4 (latest)
  • browser: Chrome, version 56.0.2924.87 (64-bit)

Steps to reproduce issue

Added this to my code:

<Player 
    src={video.url} 
    poster={video.thumbnail} 
/>

This works as expected and the video player is rendered and working. However, there is an error in the console:

Warning: Unknown prop `playsInline` on <video> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in video (created by Video)
    in Video (created by Player)
    in div (created by Player)
    in Player (created by ViewPatientsPage)

Generally, this something that only bugs you in development mode. None the less, it would be ideal for the playsInline prop not to be applied directly to the video unless the client browser is Safari.

Controlling Play/Seek & Accessing Props from Outside Component

Hi there,
This is a great component! So great to see a high quality component using react with redux.

I need to be able to control the Player from components outside of the Player. I was expecting to have access to the Player state and props, but looks like they're not available?

For example, I have a playlist of snippets from a single video source. I want to be able to click on the a playlist item and play this snippet - ie, need to be able seek to this snippet in Player and play it. I also need to be able to access the currentTime, Duration and other props, in order to manipulate my playlist snippets.

I installed via NPM, am using chrome browser, and redux-logger to track actions and state - nothing is coming up in action and state when using default controls with ....

Thank - you!
Paola

点击留白处报错

Issue description

  • version 0.7.3
  • browser: chrome 57.0.2987.110 (64-bit)

我的代码

       //,循环item里面的视频,其中file是视频的URL路径
      <Player width={300} height={300} preload="none" ref={'player' + item.id} >
              <source src={item.file} />
              <BigPlayButton position="center"/>
              <LoadingSpinner />
              <ControlBar disableDefaultControls={true}>
                <PlayToggle />
                <VolumeMenuButton vertical={true}/>
                <DurationDisplay/>
                <ProgressControl/>
                <FullscreenToggle/>
              </ControlBar>
      </Player>

效果图

image

效果是完全正确的,但是我在暂停或者播放的时候,点击留白处,他报这个错了


player.js:59 Uncaught TypeError: Cannot read property 'play' of null
    at Manager.play (player.js:59)
    at Object.play (Manager.js:54)
    at Shortcut.togglePlay (Shortcut.js:239)
    at Shortcut.handleClick (Shortcut.js:312)
play @ player.js:59
(anonymous) @ Manager.js:54
togglePlay @ Shortcut.js:239
handleClick @ Shortcut.js:312

虽然报错了,但是不影响效果,我想问下我该怎么解决这个报错呢?

预期效果

不影响播放效果的同时,点击留白处不报错

using yarn instead of npm

Issue description

when I try to install 'video-react' using yarn instead of npm, the server crashes. Since I've been using yarn for the rest of my project, using 'npm install' per the readme causes npm to crash.

  • version react 15.5.4
  • browser: chrome-62

Steps to reproduce

  1. yarn add video-react react react-dom redux
  2. yarn start

Expected behaviour

my website should load same as before I added the dependencies

Actual behaviour

This is output by the react server -

TypeError: Cannot read property '0' of undefined

  • ExternalModuleFactoryPlugin.js:19
    [start-oliver]/[webpack]/lib/ExternalModuleFactoryPlugin.js:19:40

  • NormalModuleFactory.js:159
    [start-oliver]/[react-scripts]/[webpack]/lib/NormalModuleFactory.js:159:3

  • Tapable.js:75 NormalModuleFactory.applyPluginsAsyncWaterfall
    [start-oliver]/[tapable]/lib/Tapable.js:75:69

  • NormalModuleFactory.js:144 NormalModuleFactory.create
    [start-oliver]/[react-scripts]/[webpack]/lib/NormalModuleFactory.js:144:8

  • Compilation.js:356 Compilation.process [as _addModuleChain]
    [start-oliver]/[react-scripts]/[webpack]/lib/Compilation.js:356:16

  • Compilation.js:424 Compilation.process [as addEntry]
    [start-oliver]/[react-scripts]/[webpack]/lib/Compilation.js:424:7

  • SingleEntryPlugin.js:24 Compiler.compiler.plugin
    [start-oliver]/[webpack]/lib/SingleEntryPlugin.js:24:16

  • Tapable.js:107 Compiler.applyPluginsParallel
    [start-oliver]/[tapable]/lib/Tapable.js:107:14

  • Compiler.js:394 Compiler.compile
    [start-oliver]/[react-scripts]/[webpack]/lib/Compiler.js:394:7

  • Compiler.js:203 Compiler.runAsChild
    [start-oliver]/[react-scripts]/[webpack]/lib/Compiler.js:203:7

  • compiler.js:70
    [start-oliver]/[html-webpack-plugin]/lib/compiler.js:70:19

  • compiler.js:69 Object.compileTemplate
    [start-oliver]/[html-webpack-plugin]/lib/compiler.js:69:10

  • index.js:47 Compiler.
    [start-oliver]/[html-webpack-plugin]/index.js:47:40

Demo

N/A

autoHide does not work on iOS when using autoPlay

Issue description

  • version .0.8.9
  • browser: Safari - iOS 11.0.3

Steps to reproduce issue

Steps to reproduce

  1. Define a Player component with autoPlay set to true.
  2. Define a ControlBar component inside the Player with autoHide set to true.

Expected behaviour

The control bar should auto-hide as it does in other browsers (desktop Safari)

Actual behaviour

The video will auto play when the parent component is rendered, however auto-hiding of the control bar does not work, it remains visible during the entire playback. It will only auto-hide if you interact with the control bar after playback starts (for example pausing and then resuming playback).

Multiple source video

Issue description

  • version #0.6.3
  • browser: Chrome

Steps to reproduce issue

I implemented the solution to have multiple video in my component : https://github.com/video-react/video-react/wiki/Components#video. Can you give more advise or the entire code? I try it but it's not working.

Also, is it possible to decide the order of the fallback?

Expected behaviour

The snippet should work

Actual behaviour

The snippet is not working

Custom BigPlayButton size

Issue description

  • version #0.7.2

Is there any way to custom BigPlayButton like:

<BigPlayButton style={{ fontSize: '2em' }} /> 

or

<BigPlayButton className={foo} />

Support fullscreen on iphone6s

Issue description

  • version #0.6.4
  • browser: safari on ios 10.2.1

Steps to reproduce issue

Steps to reproduce

  1. set
  2. click
  3. click fullscreen button in

Expected behaviour

native full-screen in browser.

Actual behaviour

video height is 0

It needs some code like this:

const videoElm = document.getElementsByTagName("video")[0];
if (videoElm.webkitSupportsFullscreen) {
  if (videoElm.webkitDisplayingFullscreen){
    videoElm.webkitExitFullscreen();
  } else {
    videoElm.webkitEnterFullscreen();
  }
}

https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html
https://developer.apple.com/reference/webkitjs/htmlvideoelement

HTTPS mixed content

Got an error saying that the CSS stylesheet is served using HTTP not HTTPS,
How can I fix this issue?

Safari 11 autoplay + bigPlayButton - doesn't disappear when enable autoplay in Safari's preferences

Safari 11 autoplay + bigPlayButton - doesn't disappear when enable autoplay in Safari's preferences.
I have a video-react player that has autoplay enabled and a bigPlaybutton. In Safari 11 they now block players attempting to autoplay. However, a user can allow certain sites to autoplay by enabling autoplay in the Safari preferences on a per website basis. When it is enabled and you refresh the page the video-react player will autoplay however the bigPlayButton does not disappear until you pause and play again.

I know this is just hidden by CSS ( so i have a hacky solution to get around this on my app ) but it looks like the containing div is getting the 'video-react-has-started' class that hides the bigPlayButton when the video starts autoplaying.

  • version #0.8.8
  • browser: Safari 11.0

Expected behaviour

BigPlayButton should disappear

Actual behaviour

Video plays with the bigPlayButton over the video until you press pause and play.

Responsive?

Issue description

Not sure its an issue.... How to make this responsive - ie, respond with automatic scaling to screen size, whether on mobile, tablet, or resizing browser on laptop/desktop.

Thank you!
Paola

*feature question* Facebook-style video

How would you go about allowing only one video to play at the same time and autoplay when scrolled over? Basically the same way Facebook does it in their news feed.

Subtitle selector

Issue description

  • version #0.8.8
  • browser: Google Chrome 61 on Fedora Linux

Steps to reproduce issue

See the code here: https://github.com/juandjara/yify-client/blob/master/src/components/shared/MagnetLoader.jsx#L124

Expected behaviour

The video UI should have a section to toggle subtitles on and off when a <track> element is added as a child of the <Player> component

Actual behaviour

No UI is shown for subtitle selection and toggling but the subtitles displays well on the video

Problem configuring width and height of the video player

I have troubles configuring the size of my player. So here is my code.

        <Player
        playsInline
        fluid={false}
        src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
        width={100}
        height={50}
      />

I still have always a big size whatever I do changing width and size and even changing fluid. What can I do?

Hover to read HLS

Issue description

  • version #0.6.3
  • browser: All

Steps to reproduce issue

When I implemented the video to read HLS file, I have to put my mouse on the video to have the video plays. The same issue is on your own example.

Steps to reproduce

  1. No hover on the HLS video -> Video is not playing
  2. Hover on the video -? Video is playing

Expected behaviour

Video is playing without the mouse on hover

Actual behaviour

Video is not playing

Spinner + Play Both Apear when no source

Hello again,
Thank you for resolving the previous issue #7 so quickly. Really appreciated!

Description

When src is '', LoadingSpinner and BigPlayButton. BigPlayButton is clickable and tries to play the src.

  • version #0.6.2
  • browser: Chrome 55

Steps to reproduce issue

             this.props.videoURL = ''

             <Player className="video__el">
                  <BigPlayButton position="center" />
                  <source src={this.props.videoURL} />
                  <LoadingSpinner /> 
                  <ControlBar autoHide />
                  <Shortcut shortcuts={this.newShortcuts} />
                </Player>

Steps to reproduce

  1. Just use above code

Expected behaviour

Expect only the LoadingSpinner to appear

Actual behaviour

LoadingSpinner and BigPlayButton appear. BigPlayButton is clickable - on clicking ControlBar appears, with Play active (pause button), and LoadingSpinner disappears. When I click Pause, an error thrown:
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

重复自动播放超短视频时的问题

Issue description

  • version 0.7.3
  • browser: Chrome 57.0.2987.110 (64-bit)

Expected

  1. 我想在视频播放期间把ControlBar隐藏了,就是不再会显示的那种,因为我播放的是只有几秒钟的视频,而且会重复自动播放,所以每次播放后都会有一条ControlBar在那。
  2. 自动重复播放时,LoadingSpinner不再显示。因为每次重播放时,都会弹出一个LoadingSpinner,我也不想要他
  3. 我不想让他点击视频暂停或播放
  • 请问这种情况在现在的版本有相对的方案吗?如果没有可以扩展一下吗?
  • 欢迎PR吗?

微信以及微博浏览器播放按钮无法显示

微信以及微博浏览器,第一次打开页面的时候无法显示播放按钮,
微信浏览器可以通过以下代码解决。。微博就没办法了

WeixinJSBridge.invoke('getNetworkType', {}, e=> {
        this.refs['player'].load();
      });

wechatimg2

change source url not work

i want to change player url ,i use setState to change source url but player still play old url

  • version # 0.3.3

here is my code

import React from 'react';

import "../../../node_modules/video-react/dist/video-react.css";
import './index.css'
import { Player, ControlBar, ReplayControl,
  ForwardControl, CurrentTimeDisplay,
  TimeDivider, PlaybackRate
} from 'video-react';

import Selections from './Selections'

export default class VideoPlayer extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      playUrl: "http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4"
    }
    this.changeUrl = this.changeUrl.bind(this)
  }
  handleClick(){
    this.props.navigator.pushPage({component: Main, key: "Main_page"});
  }
  changeUrl(url) {
    this.setState({playUrl: url})
  }
  render() {
    return (
      <Page>
        <div style={styles.videoTitle}>{this.props.title}</div>
        <Player poster="/assets/poster.png" >
          <source
           src={this.state.playUrl}/>
          <ControlBar>
            <ReplayControl disabled />
            <ForwardControl seconds={30} />
            <CurrentTimeDisplay order={4.1} />
            <TimeDivider order={4.2} />
            <PlaybackRate rates={[1, 1.25, 1.5, 2]} order={7.1} />
          </ControlBar>
        </Player>
        <Selections changeUrl={this.changeUrl}/>
      </Page>
    );
  }
}

VideoPlayer.defaultProps = {
  title: 'test',
}

when i fire changeUrl event , url changed but player still play previous url

Expected behaviour

when i fire changeUrl event , url changed and player play new url

muted={false} not working?

Hello again,

Trying to autoplay a video, muted - it does not appear to be working...

  • version latest version
  • browser: chrome 55.0.2883.95 (64-bit)

Steps to reproduce issue

<Player ref="player" className="video__el" autoPlay muted={true} startTime={0}>
                  <BigPlayButton position="center" />
                  <source src={videoSrc} />
                  <LoadingSpinner /> 
                  <ControlBar autoHide={false} />
                  <Shortcut shortcuts={this.newShortcuts} />
</Player>

Steps to reproduce

  1. simply loading with the above code.

Expected behaviour

Expecting the page to load and video to start playing from the begining, but muted, including the mute control to be in active muted state

Actual behaviour

Page to loads and video to starts playing from the begining, but with volume and volume control active

Thank-you!

BigPlayButton Arrests Keyboard

Hello again,
We're start open testing of our app tomorrow and just uncovered this bug. Be appreciated if you can find a quick solution :)

An alternative would disabling the BigPlayButton and autoShowing the ControlBar - right now it only shows once the video starts.

Issue description

Using the big play button to play the video subsequently arrests the 'space bar' on the keyboard, resulting in each time the space bar is pressed, the video play/pause state toggles.

Users in my app submit feedback to the video - so if the first thing they do is pay the video (natural thing to do), when they then try add comments they cannot because each time the space bar is pushed, the video plays/pauses.

However, if I activate the play from via method play(), before the user hits the big play, this does not happen.

  • version #0.8.5
  • browser: Safari latest

Steps to reproduce issue

  1. Install the app, hit the BigPlay button, hit the spacebar on your keyboard.
  2. Install the app, trigger a play via the play() method, hit the bar on your keyboard

Expected behaviour

Hitting the BigPlayButton should not tie spacebar keyboard stroke to toggle play, or should be an option.

Actual behaviour

Hitting the BigPlayButton ties spacebar keyboard stroke to toggle play and cannot be disabled. Or can it??

Thank you!
Paola

Demo

You can fork from this template and add your code
https://jsfiddle.net/jimliu/wcnqzwgs/

PlaybackRate - CSS styling does not impact?

The CSS styling of the ControlBar is not carried thru to the rollover menu option for playbackrates

  • version #0.6.4
  • browser: Latest chrome, firefox

Steps to reproduce issue

                <Player 
                  ref="player" 
                  muted={this.props.playerState.muted} 
                  autoPlay={this.props.playerState.autoPlay} 
                  startTime={this.props.playerState.startTime} 
                  videoWidth="634"
                  videoHeight="356" >
                    <BigPlayButton position="center" />
                    <source src={this.props.playerState.videoURL} />
                    <LoadingSpinner /> 
                    <ControlBar autoHide={false} >
                        <ReplayControl seconds={10} order={1.1} />
                        <ForwardControl seconds={10} order={1.2} />
                        <CurrentTimeDisplay order={4.1} />
                        <TimeDivider order={4.2} />
                        <PlaybackRate
                          rates={[-2, -1, 1, 1.25, 1.5, 2]}
                          order={7.1}
                        />
                        <VolumeMenuButton vertical={true}  />                 
                    </ControlBar>
                    <Shortcut shortcuts={this.newShortcuts} />
                  </Player>

Steps to reproduce

  1. Use the above code to create player instance
  2. use the default included css
  3. Mouse over the '1.00x' player menu item - you'll see the styling is different

Expected behaviour

Expect the styling to be the same as the rest of the controlbar

Actual behaviour

Styling is different to the rest of the controlbar

Loading Spinner Appears Indefinitely in IE11

Issue description

.video-react-waiting class not removed in IE, causing loading spinner to remain indefinitely.

  • version 0.8.5
  • browser: Internet Explorer 11

Steps to reproduce issue

  1. Seek video.
  2. Loading spinner appears while video buffers.
  3. Video finishes buffering.
  4. Loading spinner remains even after playback resumes.

This works fine in all other tested browsers.

Expected behaviour

Loading spinner should disappear when loading complete.

Actual behaviour

Loading spinner remains

Demo

You can fork from this template and add your code
https://jsfiddle.net/jimliu/wcnqzwgs/

JSFiddle doesn't even work...

addTextTrack() - how to use it?

How to include subtitles to the video player?
Is addTextTrack method for feeding subtitle?
Could you please show us a sample usage?

LoadingSpinner(...): No `render` method found on the returned component instance

Issue description

  • version #0.8.5
  • browser: Irrelevant, Chromium 59, node v8.1.3, firefox 54.0.1

Steps to reproduce issue

Steps to reproduce

  1. install package
  2. don't provide a loading spinner or don't provide a poster

Expected behaviour

It should just not try to render loading spinner

It should use the first frame of the video as documented

Actual behaviour

(unknown) Warning: PosterImage(...): No `render` method found on the returned component instance: you may have forgotten to define `render`, returned null/false from a stateless component, or tried to render an element whose type is a function that isn't a React component.

 //OR

(unknown) Warning: LoadingSpinner(...): No `render` method found on the returned component instance: you may have forgotten to define `render`, returned null/false from a stateless component, or tried to render an element whose type is a function that isn't a React component.

//BOTH
meeting:587 Uncaught TypeError: inst.render is not a function
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (eval at <anonymous> (main.js:2808), <anonymous>:587:34)
    at ReactCompositeComponentWrapper._renderValidatedComponent (eval at <anonymous> (main.js:2808), <anonymous>:607:32)
    at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (eval at <anonymous> (main.js:2538), <anonymous>:66:21)
    at ReactCompositeComponentWrapper.mountComponent (eval at <anonymous> (main.js:2808), <anonymous>:220:30)
    at ReactCompositeComponentWrapper.wrapper [as mountComponent] (eval at <anonymous> (main.js:2538), <anonymous>:66:21)
    at Object.mountComponent (eval at <anonymous> (main.js:2730), <anonymous>:37:35)
    at ReactDOMComponent.mountChildren (eval at <anonymous> (main.js:3114), <anonymous>:241:44)
    at ReactDOMComponent._createContentMarkup (eval at <anonymous> (main.js:2988), <anonymous>:591:32)
    at ReactDOMComponent.mountComponent (eval at <anonymous> (main.js:2988), <anonymous>:479:29)
    at Object.mountComponent (eval at <anonymous> (main.js:2730), <anonymous>:37:35)

Demo

You can fork from this template and add your code
https://jsfiddle.net/o7546sv2/

Set interval with beginning and end time of video

I want to suggest you a new feature for this video player. It's interval. So, basically, we can set a beginning time and end time for an interval like in youtube videos.

Here is an example of a video with a beginning interval (and the end is the end of the video): https://9gag.com/tv/p/aePQ7q/game-of-thrones-theme-song-created-in-garageband

I wish we can have the possibility to set both beginning and end interval very precisely. I did manage something with handleStateChange(state, prevState) but the thing is it's not accurate enough. If I want to catch exactly 20 s for instance it won't work. It will be sometimes 20.1XX or 20.6xx depends when the store updates. Would be curious to know how we can implement this.

How to add source youtube?

Issue description

i wanto add source youtube into player component

  • version #x.x.x
  • browser: name-version

Steps to reproduce issue

Steps to reproduce

  1. step1
  2. step2
  3. step3

Expected behaviour

Tell us what should happen

Actual behaviour

Tell us what happens instead

Demo

You can fork from this template and add your code
https://jsfiddle.net/jimliu/wcnqzwgs/

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.