From 584714b6fe6a6695ffd64a45cb9f851c9677769b Mon Sep 17 00:00:00 2001 From: Warwick Date: Wed, 18 Nov 2020 14:20:06 +0000 Subject: [PATCH] need to manually copy hls video parts to dist but video now plays in chunks --- src/VideoPlayer.jsx | 43 ++++++++++++++++++++++++++++++++++++++++ static/video/index.m3u8 | 19 ++++++++++++++++++ static/video/index0.ts | Bin 0 -> 1165976 bytes static/video/index1.ts | Bin 0 -> 968012 bytes static/video/index2.ts | Bin 0 -> 887736 bytes static/video/index3.ts | Bin 0 -> 258688 bytes static/video/index4.ts | Bin 0 -> 243084 bytes static/video/index5.ts | Bin 0 -> 4952672 bytes static/video/index6.ts | Bin 0 -> 23688 bytes 9 files changed, 62 insertions(+) create mode 100644 src/VideoPlayer.jsx create mode 100644 static/video/index.m3u8 create mode 100644 static/video/index0.ts create mode 100644 static/video/index1.ts create mode 100644 static/video/index2.ts create mode 100644 static/video/index3.ts create mode 100644 static/video/index4.ts create mode 100644 static/video/index5.ts create mode 100644 static/video/index6.ts diff --git a/src/VideoPlayer.jsx b/src/VideoPlayer.jsx new file mode 100644 index 0000000..05c3dd7 --- /dev/null +++ b/src/VideoPlayer.jsx @@ -0,0 +1,43 @@ +import { h, render, Component } from "preact"; +//import React from "react"; +import Hls from "hls.js"; +import PortfolioVideo from "../static/video/index.m3u8"; +export default class VideoPlayer extends Component { + state = {}; + // componentDidUpdate() { + componentDidMount() { + const video = this.player; + const url = PortfolioVideo; //"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"; + if (Hls.isSupported()) { + const hls = new Hls(); + + hls.loadSource(url); + hls.attachMedia(video); + hls.on(Hls.Events.MANIFEST_PARSED, function () { + video.play(); + }); + } else if (video.canPlayType("application/vnd.apple.mpegurl")) { + video.src = url; + video.addEventListener("loadedmetadata", function () { + video.play(); + }); + } + } + render() { + return ( +