|
|
@ -1,5 +1,6 @@
|
|
|
|
import React,{ Component } from "react";
|
|
|
|
import React,{ Component } from "react";
|
|
|
|
import { getUrl2 } from "educoder";
|
|
|
|
import { getUrl2 } from "educoder";
|
|
|
|
|
|
|
|
import ReactPlayer from 'react-player'
|
|
|
|
|
|
|
|
|
|
|
|
const $ = window.$
|
|
|
|
const $ = window.$
|
|
|
|
let _url_origin = getUrl2()
|
|
|
|
let _url_origin = getUrl2()
|
|
|
@ -15,9 +16,12 @@ class Clappr extends Component{
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
componentDidMount() {
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
|
|
|
|
const source = this.props.source || "http://your.video/here.mp4"
|
|
|
|
const source = this.props.source || "http://your.video/here.mp4"
|
|
|
|
const { id, type } = this.props
|
|
|
|
const { id, type } = this.props
|
|
|
|
const _id = `#_player${id}`
|
|
|
|
const _id = `#_player${id}`
|
|
|
|
|
|
|
|
|
|
|
|
if (!window['Clappr'] && window['ClapprLoading'] == true) {
|
|
|
|
if (!window['Clappr'] && window['ClapprLoading'] == true) {
|
|
|
|
setTimeout(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
this.componentDidMount()
|
|
|
|
this.componentDidMount()
|
|
|
@ -26,6 +30,7 @@ class Clappr extends Component{
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// && window['clappr-playback-rate-plugin']
|
|
|
|
// && window['clappr-playback-rate-plugin']
|
|
|
|
if (window['Clappr'] ) {
|
|
|
|
if (window['Clappr'] ) {
|
|
|
|
|
|
|
|
// https://github.com/clappr/clappr/issues/1839
|
|
|
|
// http://clappr.github.io/classes/Player.html#method_mute
|
|
|
|
// http://clappr.github.io/classes/Player.html#method_mute
|
|
|
|
this['player'+id] = new window.Clappr.Player({
|
|
|
|
this['player'+id] = new window.Clappr.Player({
|
|
|
|
source: source, parentId: _id,
|
|
|
|
source: source, parentId: _id,
|
|
|
@ -83,12 +88,14 @@ class Clappr extends Component{
|
|
|
|
const _id = `_player${id}`
|
|
|
|
const _id = `_player${id}`
|
|
|
|
return(
|
|
|
|
return(
|
|
|
|
<React.Fragment>
|
|
|
|
<React.Fragment>
|
|
|
|
<style>{`
|
|
|
|
{/* https://github.com/CookPete/react-player/issues/686 */}
|
|
|
|
|
|
|
|
<ReactPlayer url={source} playing={false} controls={true} width={400} height={ type == 'mp3' ? 55 : 290}/>
|
|
|
|
|
|
|
|
{/* <style>{`
|
|
|
|
.playback_rate {
|
|
|
|
.playback_rate {
|
|
|
|
margin-right: 16px;
|
|
|
|
margin-right: 16px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`}</style>
|
|
|
|
`}</style>
|
|
|
|
<div id={_id} className={className + ' ' + type}></div>
|
|
|
|
<div id={_id} className={className + ' ' + type}></div> */}
|
|
|
|
</React.Fragment>
|
|
|
|
</React.Fragment>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|