OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Is there a way you could integrate a server selection within the controls of this player

  • Thread starter Thread starter user25762168
  • Start date Start date
U

user25762168

Guest
I would like to add a server selection option within this player. But I want it to be where you would normally find the caption and playback speed settings anyway you could help me please ?

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>m3u8 Video Player</title>
</head>
<body>

<video id="videoPlayer" width="640" height="360" controls>
<source src="https://live-hls-abr-cdn.livepush.io/live/bigbuckbunnyclip/index.m3u8" type="application/x-mpegURL">
</video>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
var videoPlayer = document.getElementById('videoPlayer');

if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
videoPlayer.src = 'https://live-hls-abr-cdn.livepush.io/live/bigbuckbunnyclip/index.m3u8';
videoPlayer.addEventListener('loadedmetadata', function() {
videoPlayer.play();
});
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://live-hls-abr-cdn.livepush.io/live/bigbuckbunnyclip/index.m3u8');
hls.attachMedia(videoPlayer);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
videoPlayer.play();
});
} else {
console.error('This is a legacy browser that does not support HLS');
}
</script>

</body>
</html>
<p>I would like to add a server selection option within this player. But I want it to be where you would normally find the caption and playback speed settings anyway you could help me please ?</p>
<pre><code>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>m3u8 Video Player</title>
</head>
<body>

<video id="videoPlayer" width="640" height="360" controls>
<source src="https://live-hls-abr-cdn.livepush.io/live/bigbuckbunnyclip/index.m3u8" type="application/x-mpegURL">
</video>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
var videoPlayer = document.getElementById('videoPlayer');

if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
videoPlayer.src = 'https://live-hls-abr-cdn.livepush.io/live/bigbuckbunnyclip/index.m3u8';
videoPlayer.addEventListener('loadedmetadata', function() {
videoPlayer.play();
});
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://live-hls-abr-cdn.livepush.io/live/bigbuckbunnyclip/index.m3u8');
hls.attachMedia(videoPlayer);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
videoPlayer.play();
});
} else {
console.error('This is a legacy browser that does not support HLS');
}
</script>

</body>
</html>

</code></pre>
Continue reading...
 

Latest posts

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top