2020-06-02 08:50:32 +02:00
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<title>Live stream test</title>
|
|
|
|
|
|
|
|
|
|
<link
|
|
|
|
|
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
|
|
|
|
|
|
|
|
|
<script src="vendor/jquery-2.1.4.min.js"></script>
|
|
|
|
|
<script src="vendor/knockout-3.4.0.js"></script>
|
|
|
|
|
<script src="vendor/jquery.json-2.5.1.min.js"></script>
|
|
|
|
|
<script data-main="js/main" src="vendor/require.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
class="flex"
|
|
|
|
|
>
|
|
|
|
|
<div class="w-4/6">
|
|
|
|
|
<video id="video" controls style="width: 100%;"></video>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="w-2/6">
|
|
|
|
|
<div
|
|
|
|
|
id="messages-container"
|
|
|
|
|
class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
|
|
|
|
|
style="height: 60vh; overflow-y: scroll;"
|
|
|
|
|
>
|
|
|
|
|
<div data-bind="foreach: messages">
|
|
|
|
|
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<img data-bind="attr:{src: image}" class="w-10 h-10 rounded-full mr-4 border-black-500" style="padding: 5px; background-color:#ececec;" />
|
|
|
|
|
|
|
|
|
|
<div class="text-sm">
|
|
|
|
|
<p class="text-700" data-bind="text:author"></p>
|
|
|
|
|
<p class="text-gray-600" data-bind="text:body"></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<form
|
|
|
|
|
class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
|
|
|
|
|
data-bind="with: editingMessage"
|
|
|
|
|
>
|
|
|
|
|
<!-- Author -->
|
|
|
|
|
<label class="control-label" for="inputAuthor">Author</label>
|
|
|
|
|
<input
|
|
|
|
|
id="inputAuthor"
|
|
|
|
|
type="text"
|
|
|
|
|
data-bind="value: author"
|
|
|
|
|
class="appearance-none bg-gray-200 text-gray-700 border border-black-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
|
|
|
|
|
placeholder="Name"
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<!-- Body -->
|
|
|
|
|
<div>
|
|
|
|
|
<label class="control-label" for="inputBody">Message</label>
|
|
|
|
|
<div class="controls">
|
|
|
|
|
<textarea
|
|
|
|
|
id="inputBody"
|
|
|
|
|
data-bind="value: body"
|
|
|
|
|
placeholder="Message"
|
|
|
|
|
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
|
|
|
|
|
>
|
|
|
|
|
</textarea>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="control-group">
|
|
|
|
|
<div class="controls">
|
|
|
|
|
<a
|
|
|
|
|
href="#"
|
|
|
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
|
|
|
|
|
data-bind="click: $parent.send.bind($parent)"
|
|
|
|
|
>Send</a
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-05-24 02:57:49 +02:00
|
|
|
|
|
|
|
|
<script>
|
2020-06-02 08:50:32 +02:00
|
|
|
var video = document.getElementById("video");
|
|
|
|
|
var videoSrc = "hls/stream.m3u8";
|
2020-05-24 02:57:49 +02:00
|
|
|
if (Hls.isSupported()) {
|
|
|
|
|
var hls = new Hls();
|
|
|
|
|
hls.loadSource(videoSrc);
|
|
|
|
|
hls.attachMedia(video);
|
2020-06-02 08:50:32 +02:00
|
|
|
hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
2020-05-24 02:57:49 +02:00
|
|
|
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.
|
|
|
|
|
//
|
|
|
|
|
// Note: it would be more normal to wait on the 'canplay' event below however
|
|
|
|
|
// on Safari (where you are most likely to find built-in HLS support) the
|
|
|
|
|
// video.src URL must be on the user-driven white-list before a 'canplay'
|
|
|
|
|
// event will be emitted; the last video event that can be reliably
|
|
|
|
|
// listened-for when the URL is not on the white-list is 'loadedmetadata'.
|
2020-06-02 08:50:32 +02:00
|
|
|
else if (video.canPlayType("application/vnd.apple.mpegurl")) {
|
2020-05-24 02:57:49 +02:00
|
|
|
video.src = videoSrc;
|
2020-06-02 08:50:32 +02:00
|
|
|
video.addEventListener("loadedmetadata", function () {
|
2020-05-24 02:57:49 +02:00
|
|
|
video.play();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
