Embedding Live Streaming Video from OIT
Embedding Live Streaming Video from OITEditor's Note: The following instructions may be out-of-date now, but are left here for future educational reference.
Below is sample code for embedding a live stream from OIT's JW Player and Wowza server onto your Georgia Tech Drupal site, and includes sample code to embed live captions, which are required for accessibility compliance. For more information, visit the test live stream site.
Overview
The safest way to include this code on a page on a Drupal site is to not use an unfiltered text format, but instead to use a block template file within your subtheme. Below is sample embed code for a live stream video and live captioning of an event. NOTE: a certificate has been added to the streaming server and the code below has been modified to allow embedded secure streaming on a secure page. This code will also work on an insecure page.
The following words will need replaced with real values in the below code. Contact the IT person controlling the streaming to find out what those values should be.
[[EXAMPLE-STREAMING-SERVER]][[EXAMPLE-PLAYER-SERVER]][[STREAM-NAME]]
- Streaming Sample Code
<!-- START Live streaming video code: OIT JWPlayer and OIT Wowza server -->
<h3 id="live-video">Live Video</h3>
<script type="text/javascript" src="https://[[EXAMPLE-PLAYER-SERVER]].gatech.edu/player/jwplayer.js"></script>
<style>
/* This is just to overwrite styling on the theme that resizes the object to be so small. It should be inserted directly before the standard embed code. If you have more than one video embed on a page, you'd need to add this for each one, incrementing the '0' after player_swf_ accordingly.
*/
<!-- #player_swf_0 { height: 100% !important; } -->
</style>
<p id="alternate-video">
<ul>
<li><a href="https://support.jwplayer.com/customer/portal/articles/1597259-keyboard-shortcuts">Keyboard controls ('c' toggles captions)</a></li>
<li>If having difficulties with the video, try the <a href="https://www.google.com/chrome/browser" title="Download Chrome">Chrome web browser</a>.</li>
<li>To access captions on Android, download the <a href="https://www.videolan.org/vlc">VLC Player app</a>, open <a href="https://[[EXAMPLE-STREAMING-SERVER]].gatech.edu:/live/[[STREAM-NAME]]/playlist.m3u8?DVR">this stream link</a>, and then choose "Closed captions 1" as the Subtitle track.</li>
</ul>
</p>
<div id="player">
<script type="text/javascript">
var player = jwplayer("player");
player.setup({
file: "https://[[EXAMPLE-STREAMING-SERVER]].gatech.edu:/live/[[STREAM-NAME]]/playlist.m3u8",
image: "https://[[EXAMPLE-PLAYER-SERVER]].gatech.edu/assets/small_bling_desktop_2560x1440.jpg",
hlshtml: true,
width: "100%",
aspectratio: "16:9",
autostart: true,
stretching: "uniform",
});
player.on("captionsList", function () {
player.setCurrentCaptions(1);
});
</script>
</div>
<!-- END Live streaming video code -->
Deprecated Captioning Sample Code
Please note that the code below is no longer recommended - please use the code above instead.
The code is available in cases of live captioning an event on a budget. As an example, you could display your stenographer's live captions during a presentation, using only a web browser and a large-screened monitor.
At the bottom of a template file, you would include embed code for live captioning:
<!-- START Live caption code: Feed from your Caption Company based on instructions at https://streamtext.zendesk.com/entries/21705252-embedding-streaming-text-with-streamtext-into-your-web-pages -->
<h3>Live Captions</h3>
<div class="live-caption">
<iframe id="stFrame" title="Live Caption iframe" src="http://www.streamtext.net/text.aspx?event=[[CAPTION-ID]]&chat=false&header=false&indicator=false&footer=false&fs=30&spacing=1.75&bgc=262626&fgc=ffe08b&ff=Roboto,Verdana,serif" style="width:100%;min-height:400px">
</iframe>
</div>
<!-- END Live caption code -->
Read more about easy control options for this captioning embed at the Streamtext site.