Last active
October 26, 2023 20:22
-
-
Save lqs469/718664d3ea7ad3fcd9daf5bb8bb1734f to your computer and use it in GitHub Desktop.
(.m3u8)Play the HLS(Http Live Stream) by hls.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> | |
<!-- Or if you want a more recent canary version --> | |
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> --> | |
<video id="video"></video> | |
<script> | |
const src = 'https://video.twimg.com/amplify_video/1158708708068745216/pl/480x480/XwDJBf-F7tIeXR9O.m3u8'; | |
var video = document.getElementById('video'); | |
if(Hls.isSupported()) { | |
var hls = new Hls(); | |
hls.loadSource(src); | |
hls.attachMedia(video); | |
hls.on(Hls.Events.MANIFEST_PARSED,function() { | |
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'. | |
else if (video.canPlayType('application/vnd.apple.mpegurl')) { | |
video.src = src; | |
video.addEventListener('loadedmetadata',function() { | |
video.play(); | |
}); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://www.hls-player.net/search?q=player1&video_links=http://special.aylikozel.com:8080/live/626ertan2020/2020canertanx/286247.m3u8&view=embed&m=1