106 lines
2.2 KiB
JavaScript
106 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
|
|
import VideoJS from './videojs';
|
|
|
|
export default function Player({
|
|
type = 'videojs-internal',
|
|
source = '',
|
|
poster = '',
|
|
controls = false,
|
|
autoplay = false,
|
|
mute = false,
|
|
logo = {
|
|
image: '',
|
|
position: 'top-right',
|
|
link: '',
|
|
},
|
|
ga = {
|
|
account: '',
|
|
name: '',
|
|
},
|
|
colors = {
|
|
seekbar: '#fff',
|
|
buttons: '#fff',
|
|
},
|
|
statistics = false,
|
|
}) {
|
|
type = type ? type : 'videojs-internal';
|
|
|
|
if (type === 'videojs-internal' || type === 'videojs-public') {
|
|
const config = {
|
|
controls: controls,
|
|
poster: poster,
|
|
autoplay: type === 'videojs-internal' ? true : autoplay ? (mute === 'muted' ? true : false) : false,
|
|
muted: type === 'videojs-internal' ? 'muted' : mute,
|
|
liveui: true,
|
|
responsive: true,
|
|
fluid: true,
|
|
plugins: {
|
|
reloadSourceOnError: {},
|
|
},
|
|
sources: [{ src: source, type: 'application/x-mpegURL' }],
|
|
};
|
|
|
|
return (
|
|
<VideoJS
|
|
type={type}
|
|
options={config}
|
|
onReady={(player) => {
|
|
if (logo.image.length !== 0) {
|
|
var overlay = null;
|
|
|
|
var imgTag = new Image();
|
|
imgTag.onLoad = function () {
|
|
imgTag.setAttribute('width', this.width);
|
|
imgTag.setAttribute('height'.this.height);
|
|
};
|
|
imgTag.src = logo.image + '?' + Math.random();
|
|
|
|
if (logo.link.length !== 0) {
|
|
var aTag = document.createElement('a');
|
|
aTag.setAttribute('href', logo.link);
|
|
aTag.setAttribute('target', '_blank');
|
|
aTag.appendChild(imgTag);
|
|
overlay = aTag.outerHTML;
|
|
} else {
|
|
overlay = imgTag.outerHTML;
|
|
}
|
|
|
|
if (player.overlay) {
|
|
player.overlay({
|
|
align: logo.position,
|
|
overlays: [
|
|
{
|
|
showBackground: false,
|
|
content: overlay,
|
|
start: 'playing',
|
|
end: 'pause',
|
|
},
|
|
],
|
|
});
|
|
}
|
|
}
|
|
|
|
if (autoplay === true) {
|
|
// https://videojs.com/blog/autoplay-best-practices-with-video-js/
|
|
const p = player.play();
|
|
|
|
if (!p) {
|
|
// no autoplay;
|
|
} else {
|
|
p.then(
|
|
() => {
|
|
// autoplay worked;
|
|
},
|
|
() => {
|
|
// autoplay did not work
|
|
},
|
|
);
|
|
}
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
}
|