98 lines
3.2 KiB
JavaScript
98 lines
3.2 KiB
JavaScript
|
/*
|
||
|
|
Docs: https://hexdocs.pm/phoenix_live_view/js-interop.html#client-hooks
|
||
|
|
|
||
|
|
Usage: when using phx-hook, a unique DOM ID must always be set.
|
||
|
|
|
||
|
|
<div phx-hook="ExampleHook" id="someUniqueId"></div>
|
||
|
|
*/
|
||
|
|
|
||
|
|
// import 'vidstack/styles/defaults.css'
|
||
|
|
// import 'vidstack/styles/community-skin/video.css'
|
||
|
|
|
||
|
|
// import { defineCustomElements } from 'vidstack/elements';
|
||
|
|
// import { VidstackPlayer, VidstackPlayerLayout } from 'vidstack/global/player';
|
||
|
|
|
||
|
|
// import { VidstackPlayer } from 'vidstack'
|
||
|
|
// import { VidstackPlayer, VidstackPlayerLayout } from 'https://cdn.vidstack.io/player';
|
||
|
|
|
||
|
|
|
||
|
|
// import { HlsFacade } from "../../vendor/superstreamer-player.js"
|
||
|
|
// import "../../vendor/player.js"
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const VidstackHook = {
|
||
|
|
// This function runs when the element has been added to the DOM and its server LiveView has finished mounting
|
||
|
|
mounted() {
|
||
|
|
// defineCustomElements();
|
||
|
|
// let currentEl = this.el;
|
||
|
|
|
||
|
|
// // console.log("VidstackHook mounted");
|
||
|
|
// player = document.querySelector('media-player');
|
||
|
|
console.log('hello!')
|
||
|
|
|
||
|
|
|
||
|
|
var video = document.getElementById('video');
|
||
|
|
if (Hls.isSupported()) {
|
||
|
|
var hls = new Hls({
|
||
|
|
debug: true,
|
||
|
|
});
|
||
|
|
hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
|
||
|
|
hls.attachMedia(video);
|
||
|
|
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
|
||
|
|
video.muted = true;
|
||
|
|
video.play();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
|
||
|
|
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
|
||
|
|
// This is using the built-in support of the plain video element, without using hls.js.
|
||
|
|
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
||
|
|
video.src = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
|
||
|
|
video.addEventListener('canplay', function () {
|
||
|
|
video.play();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// console.log(player);
|
||
|
|
// console.log(defineCustomElements)
|
||
|
|
|
||
|
|
// defineCustomElements()
|
||
|
|
|
||
|
|
// VidstackPlayer.create({
|
||
|
|
// target: '#media-player',
|
||
|
|
// title: 'Sprite Fight',
|
||
|
|
// src: 'https://files.vidstack.io/sprite-fight/hls/stream.m3u8',
|
||
|
|
// poster: 'https://files.vidstack.io/sprite-fight/poster.webp',
|
||
|
|
// layout: new VidstackPlayerLayout({
|
||
|
|
// thumbnails: 'https://files.vidstack.io/sprite-fight/thumbnails.vtt',
|
||
|
|
// }),
|
||
|
|
// });
|
||
|
|
},
|
||
|
|
|
||
|
|
// This function runs when the element is about to be updated in the DOM. Note: any call here must be synchronous as the operation cannot be deferred or cancelled.
|
||
|
|
beforeUpdate() {},
|
||
|
|
|
||
|
|
// This function runs when the element has been updated in the DOM by the server
|
||
|
|
updated() {
|
||
|
|
console.log("VidstackHook updated");
|
||
|
|
},
|
||
|
|
|
||
|
|
// This function runs when the element has been removed from the page, either by a parent update, or by the parent being removed entirely
|
||
|
|
destroyed() {},
|
||
|
|
|
||
|
|
// This function runs when the element's parent LiveView has disconnected from the server
|
||
|
|
disconnected() {},
|
||
|
|
|
||
|
|
// This function runs when the element's parent LiveView has reconnected to the server
|
||
|
|
reconnected() {},
|
||
|
|
};
|
||
|
|
|
||
|
|
export default VidstackHook;
|
||
|
|
|