Oklahoma City Tornado Outbreak

index.html

		
<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>

oklahoma-city-tornado-outbreak.markdown

Oklahoma City Tornado Outbreak

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.

License.

script.js

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();
    });
}

scripts

<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>

style.css

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;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />