Initial hls video playback support
This commit is contained in:
parent
bce76ab8d1
commit
f5fef0ff3a
6 changed files with 45 additions and 13 deletions
|
@ -297,7 +297,7 @@ video, .video-container img {
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background-color: #000000bd;
|
||||
background-color: #0000008d;
|
||||
}
|
||||
|
||||
.video-overlay p {
|
||||
|
@ -309,6 +309,15 @@ video, .video-container img {
|
|||
font-size: 20px;
|
||||
}
|
||||
|
||||
.video-overlay div {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
top: calc(50% - 20px);
|
||||
margin: 0 auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.still-image {
|
||||
max-height: 379.5px;
|
||||
max-width: 533px;
|
||||
|
|
2
public/js/hls.light.min.js
vendored
Normal file
2
public/js/hls.light.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
15
public/js/hlsPlayback.js
Normal file
15
public/js/hlsPlayback.js
Normal file
|
@ -0,0 +1,15 @@
|
|||
function playVideo(overlay) {
|
||||
const video = overlay.parentElement.querySelector('video');
|
||||
video.setAttribute("controls", "");
|
||||
overlay.style.display = "none";
|
||||
|
||||
const url = video.getAttribute("data-url");
|
||||
var hls = new Hls({autoStartLoad: false});
|
||||
hls.loadSource(url);
|
||||
hls.attachMedia(video);
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
||||
hls.loadLevel = hls.levels.length - 1;
|
||||
hls.startLoad();
|
||||
video.play();
|
||||
});
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue