Simple Overview of Local News Coverage
- Note that these streams are subject to the time of this event only. They may also stream video different then the Header due to .m3u8 security features.
A Pen by Jason Lensch on CodePen.
<div class="flex-row"> | |
<div class="video-div"> | |
<span>NEWS 9 Broadcast</span> | |
<video controls muted autoplay id="video1"></video> | |
</div> | |
<div class="video-div"> | |
<span>NEWS 9 Helicopter</span> | |
<video controls muted autoplay id="video6"></video> | |
</div> | |
<div class="video-div"> | |
<span>NEWS 9 Val & Amy</span> | |
<video controls muted autoplay id="video5"></video> | |
</div> | |
<div class="video-div"> | |
<span>KFOR Broadcast</span> | |
<video controls muted autoplay id="video2"></video> | |
</div> | |
<div class="video-div"> | |
<span>KOCO Broadcast</span> | |
<video controls muted autoplay id="video3"></video> | |
</div> | |
<div class="video-div"> | |
<span>KOCO Helicopter</span> | |
<video controls muted autoplay id="video4"></video> | |
</div> | |
</div> |
Simple Overview of Local News Coverage
A Pen by Jason Lensch on CodePen.
var streams = [{ | |
id: 'video1', | |
link: 'https://kwtv-lh.akamaihd.net/i/KWTV_1256@91154/master.m3u8' | |
}, | |
{ | |
id: 'video2', | |
link: 'https://livestream-f.akamaihd.net/i/9934971_3371071_lsi7p2gln5vd0lrguov_1@408267/master.m3u8?__b__=678&dw=14400&hdnea=st=1558393307~exp=1558395107~acl=/i/9934971_3371071_lsi7p2gln5vd0lrguov_1@408267/*~hmac=8ad483d810bf69be561fd8a5ca1f7b16b357cb55d6a53ee5d0d4bc0f788184ba&__a__=off' | |
}, | |
{ | |
id: 'video3', | |
link: 'https://koco8.koco.com/koco8/koco8.m3u8' | |
}, | |
{ | |
id: 'video4', | |
link: 'https://dai.google.com/linear/hls/pa/event/rkYUnarJRdeNz_cPawQvxQ/stream/a34f0d89-3578-40aa-b183-f76384cfeff9:ATL/master.m3u8' | |
}, | |
{ | |
id: 'video5', | |
link: 'https://kwtv-lh.akamaihd.net/i/KWTV_666@91154/master.m3u8' | |
}, | |
{ | |
id: 'video6', | |
link: 'https://kwtv-lh.akamaihd.net/i/KWTV_1014@91154/master.m3u8' | |
} | |
]; | |
for (var i = 0; i < streams.length; i++) { | |
var video = document.getElementById(streams[i].id); | |
var hls = new Hls(); | |
window.hls = hls; | |
hls.on(Hls.Events.ERROR, function(event, data) { | |
if (data.fatal) { | |
switch (data.type) { | |
case Hls.ErrorTypes.NETWORK_ERROR: | |
// try to recover network error | |
console.log("fatal network error encountered, try to recover"); | |
setTimeout(() => hls.startLoad(), 1000); | |
break; | |
case Hls.ErrorTypes.MEDIA_ERROR: | |
console.log("fatal media error encountered, try to recover"); | |
hls.recoverMediaError(); | |
break; | |
default: | |
// cannot recover | |
hls.destroy(); | |
break; | |
} | |
} | |
}); | |
hls.loadSource(streams[i].link); | |
hls.attachMedia(video); | |
hls.on(Hls.Events.MANIFEST_PARSED, function() { | |
video.play(); | |
}); | |
} |
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
body { | |
background: #000000; | |
} | |
span { | |
text-align: center; | |
color: rgba(255, 255, 255, 0.75); | |
} | |
.flex-row { | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: space-evenly; | |
} | |
.video-div { | |
width: 30%; | |
padding: 30px 0; | |
text-align: center; | |
} | |
video { | |
width: 100%; | |
height: 100%; | |
padding-bottom: 30px; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" /> |