Hi, i am reading through the docs here. https://github.com/Metrological/metrological-sdk/blob/master/docs/plugins/videoplayer.md
For the VideoPlayer plugin.
From what I understand the previous way to add a VideoPlayer was like this.
import {Lightning, VideoPlayer} from "@lightningjs/sdk";
import {RouterPage} from "./RouterPage"; // Defines isPage:true in the TypeConfig.
// @ts-ignore
import shaka from 'shaka-player';
import PlayPause from "../components/PlayPause";
export default class Player extends Lightning.Component<Lightning.Component.TemplateSpecLoose, RouterPage> {
_player: shaka.Player
static override _template(): Lightning.Component.Template<Lightning.Component.TemplateSpecLoose> {
return {
Wrapper: {
alpha: 1,
PlayPause: {
type: PlayPause,
i: 'playpause'
}
}
}
}
override _firstActive() {
VideoPlayer.consumer(this);
VideoPlayer.loader(this._loadPlayback.bind(this));
VideoPlayer.unloader(this._unloadPlayback.bind(this));
}
override _active() {
VideoPlayer.open('https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel.ism/.mpd')
}
override _getFocused(): Lightning.Component {
return this.tag('PlayPause');
}
_setupShakaPlayer (videoEl: HTMLVideoElement) {
videoEl.autoplay = true;
this._player = new shaka.Player(videoEl);
}
async _loadPlayback (url: string, videoEl: HTMLVideoElement) {
this._setupShakaPlayer(videoEl);
await this._player.load(url);
}
async _unloadPlayback () {
await this._player.unload();
}
override _handleEnter () {
const button = this.tag('PlayPause');
button.isPlaying = !button.isPlaying;
button.isPlaying ? VideoPlayer.play() : VideoPlayer.pause();
}
}But this seem to have changed with the new setup with SolidJS. How can you setup a simple player with SolidJS? I know this is wrong as the video el is not outputted to the dom but what can you use in its place?
import Button from '../components/Button/Button';
import { Row } from '@lightningjs/solid-primitives';
import { VideoPlayer } from '@lightningjs/sdk'
const VideoPage = () => {
function onEnter(event, elm) {
this.states.toggle('disabled');
// VideoPlayer.consumer(this);
const videoUrl = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
const myLoader = (url, videoEl, config) => {
console.log(url, videoEl, config);
return new Promise(resolve => {
videoEl.setAttribute('src', url)
videoEl.load()
resolve()
})
}
VideoPlayer.loader(myLoader(videoUrl, document.querySelector("video")))
VideoPlayer.size(960, 540)
VideoPlayer.open(url)
}
const RowStyles = {
display: 'flex',
justifyContent: 'flexStart',
width: 1500,
height: 300,
color: '00000000',
gap: 26,
y: 400,
x: 100
}
return (
<Row style={RowStyles}>
<Button autofocus onEnter={onEnter}>Play Video</Button>
<video></video>
</Row>
);
};
export default VideoPage;Any info would be great.
Hi, i am reading through the docs here. https://github.com/Metrological/metrological-sdk/blob/master/docs/plugins/videoplayer.md
For the VideoPlayer plugin.
From what I understand the previous way to add a VideoPlayer was like this.
But this seem to have changed with the new setup with SolidJS. How can you setup a simple player with SolidJS? I know this is wrong as the video el is not outputted to the dom but what can you use in its place?
Any info would be great.