But first, you need to have your own live streaming link or the so called m3u8 link. But if you do not have one, then you need to do first the tutorial about extracting m3u8 link of live streaming. Warning: Extracting a live streaming link without permission from the original broadcaster is absolutely illegal. This tutorial is definitely for educational purposes only.
Assuming that you want to continue then, click here for you to be able to know first how to get a live streaming link. After you have done the tutorial given on the link, then you can proceed with this one.
STEPS:
1. If you are going to put your live streaming inside an article post, click the "New post" button to start.
2. For this tutorial, I will put the USA - Red Bull TV inside a blogger post using Flow Player. Just type "USA - Red Bull TV Live Streaming" in the post Title. From Compose switch to HTML mode. After switching copy and paste the code below and then click the "Publish" button.
<!---FLOWPLAYER CODES STARTS HERE---->
<link href="//releases.flowplayer.org/7.2.5/skin/skin.css" rel="stylesheet"></link>
<link href="//demos.flowplayer.com/media/css/demo.css" rel="stylesheet"></link>
<link href="//demos.flowplayer.com/media/css/pygments.css" rel="stylesheet"></link>
<style>
.flowplayer {
background-color: #333333; height: 380px; width: 100%;
}
.flowplayer .fp-color-play {
fill: #eee;
}
</style>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.8.9/hls.light.min.js"></script>
<script src="//releases.flowplayer.org/7.2.5/flowplayer.min.js"></script>
<br />
<div id="content">
<center>
Live streaming 1<br />
Just click the play button below to start watching the live stream.
</center>
<div class="flowplayer no-brand is-splash is-paused skin-custom fp-fat fp-outlined has-splash-text fp-default-playlist is-mouseout" data-live="true" data-ratio="0.4167" data-embed="false" data-ratio="0.5625" data-advance="false" data-qsel="-mobile,-mobile2,-sd,-md,-hd,-fullhd,-qhd,-4k" data-qlabels="240p,270p,360p,540p,720p,1080p,1440p,2160p">
<video data-title="Live stream">
<source src="https://rbmn-live.akamaized.net/hls/live/590964/BoRB-AT/master_3360.m3u8" type="application/x-mpegurl"></source></video>
</div>
</div>
<script>
if (location.search.indexOf("hlsjs=false") > -1) {
flowplayer.conf.hlsjs = false;
} else if (location.search.indexOf("safari=true") > -1) {
flowplayer.conf.hlsjs = {
safari: true
};
}
var toggleButton = document.getElementById("hlsjstoggle"),
hlsjsLoaded = location.search.indexOf("hlsjs=false") < 0;
if (toggleButton) {
if (flowplayer.engines[0].engineName !== "hlsjs") {
toggleButton.parentNode.style.display = "none";
} else {
toggleButton.href = location.pathname + (hlsjsLoaded
? "?hlsjs=false"
: "");
toggleButton.getElementsByTagName("span")[0].innerHTML = hlsjsLoaded
? "without"
: "with";
}
}
</script>
<!---FLOWPLAYER CODES ENDS HERE---->
3. When published, just click the View link located under the article when you hover your mouse to test your live streaming.
4. When the Flow Player is loaded already, click the "Play" button.
5. Wait for the live streaming to load.
6. If successful, your live streaming is now ready.
If you want to customize your Flow Player here is the line of codes that you can change the value.
- background-color: #333333; - background color of your flow player
- height: 380px; - the height of your flow player
- width: 100%; - the width of your flow player
- fill: #eee; - changes the color of the Play button
- src="https://rbmn-live.akamaized.net/hls/live/590964/BoRB-AT/master_3360.m3u8" - if you have your own live streamung link, then you can change the value given with your own one
- data-title="Live stream" - changes the title of the live stream
If you wanted a live example of this tutorial, you can play the live streaming below.
Just click the play button below to start watching the live stream.
0 Comments
Post a Comment