Code Monkey home page Code Monkey logo

iihs's Introduction

OEIT Player

Makes use of the JW Player 6. Takes a video source and transcript and displays them with interactivity.

Usage

Need to include these stylesheet links in the head

<link rel="stylesheet" type="text/css" href="https://iihs-tatemae.s3.amazonaws.com/css/player.css" />
<link rel="stylesheet" type="text/css" href="https://iihs-tatemae.s3.amazonaws.com/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://iihs-tatemae.s3.amazonaws.com/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" type="text/css" href="https://iihs-tatemae.s3.amazonaws.com/css/bootstrap-modal.css" />
<link rel="stylesheet" type="text/css" href="https://iihs-tatemae.s3.amazonaws.com/css/bootstrap-select.min.css" />
<link rel="stylesheet" type="text/css" href="https://iihs-tatemae.s3.amazonaws.com/css/bootstrap-glyphicons.css" />

And need to include these script tags at the bottom of the body

<script type="text/javascript" src="https://iihs-tatemae.s3.amazonaws.com/js/parser.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://iihs-tatemae.s3.amazonaws.com/js/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="https://iihs-tatemae.s3.amazonaws.com/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://iihs-tatemae.s3.amazonaws.com/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="https://iihs-tatemae.s3.amazonaws.com/js/bootstrap-modalmanager.js"></script>
<script type="text/javascript" src="https://iihs-tatemae.s3.amazonaws.com/js/bootstrap-select.min.js"></script>
<script src="http://jwpsrv.com/library/jLEt7AN+EeO1uxIxOUCPzg.js"></script> <!-- JW Player -->
<script type="text/javascript" src="https://iihs-tatemae.s3.amazonaws.com/js/player.js" ></script>

And finally to initialize

 <script type="text/javascript">
  $(document).ready(function() {
    SMPlayer.init();
  });
</script>

For a modal player the Data Attributes need to be in an element with class="vidinfo" with a nested element that has a class="video".

<td class="vidinfo" data-id="bish_sanyal" data-.....>
  <p><a href="https://iihs-tatemae.s3.amazonaws.com/IIHS_Bish_Sanyal_Oct2009.mov" class="video"></p>
</td>

For an inline player all you need is the Data Attributes in an element with class="vidinfo-inline".

<div class="vidinfo-inline" data-id="scot_osterweil" data-.......>
</div>

Each of the players require this template be inside the markup:

<div id="player-frame" class="modal hide fade" tabindex="-1" data-width="760">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3></h3>
  </div>
  <div class="modal-body">
    <div class="row-fluid">
      <div class="span6">
        <div class="player-control">
          <div id="player_"></div>
          <div class="player-speaker"></div>
          <div class="player-speaker-location"></div>
        </div><!-- player-control -->
      </div>
      <div class="span6">
        <div class="transcript-control">
          <div class="search-control">
            <span class="search-count"></span> <input class="search" type="text" size="15" value="Search transcript" />
          </div>
          <div class="transcript" class="pane"></div>
          <div class="transcript-search" class="pane"></div>
          <div class="control">
            <div class="control-selector">
              <select class="selectpicker transcript-locale-selector"></select>
            </div>
          </div>
        </div><!-- transcript-control -->
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <img class="branding" src="" alt="" />
  </div>
</div><!--player-frame-->

Data Attributes

data-id

This is the id for that player. It MUST be unique on the page, or else weird playback WILL occur.

data-id="walter_lewin"

data-title

The title is what displays in the modal header.

data-title="Some sort of classroom video"

data-speaker

The speaker is shown below the video.

data-speaker="Prof. Walter Lewin"

data-speaker-location

The speaker location is shown below the speaker below the video.

data-speaker-location="Neverland, USA"

data-video-srcs

Takes a hash of video titles and their srcs. This hash must be enclosed in single quotes, with the keys and values inside double quotes. Defaults to the very first source.

data-video-srcs='{"144p":"https://iihs-tatemae.s3.amazonaws.com/video/Lec_1_801_Physics_I_Classical_Mechanic_Fall_1999_Low_Quality_144p.mp4","240p":"https://iihs-tatemae.s3.amazonaws.com/video/Lec_1_801_Physics_I_Classical_Mechanics_Fall_1999_Low_Quality_240p.mp4","360p":"https://iihs-tatemae.s3.amazonaws.com/video/Lec_1_801_Physics_I_Classical_Mechanics_Fall_1999_Standard_Quality_360p.mp4"}'

data-video-width

This is the width the video will be shown at.

data-video-width="320"

data-video-height

This is the height the video will be shown at.

data-video-height="240"

data-preview-src

This is the src for the splash screen in the video. Before the video actually plays, this image will be shown.

data-preview-src="https://iihs-tatemae.s3.amazonaws.com/img/Walter_Lewin.png"

data-default-locale

The default locale will tell the player which transcript to use by default. If none is specified, then the first locale in the data-transcripts will be used.

data-default-locale="en-US"

data-transcripts

The transcripts takes a hash of the locale and the vtt src. WebVTT format must be used. This hash must be enclosed in single quotes, with the keys and values inside double quotes.

data-transcripts='{"en-US":"https://iihs-tatemae.s3.amazonaws.com/transcripts/lec1-edit.vtt","hi-IN":"https://iihs-tatemae.s3.amazonaws.com/transcripts/lec1-edit-bfcoder.vtt"}'

data-branding-src

The branding source is displayed in the lower right corner of the modal.

data-branding-src="https://iihs-tatemae.s3.amazonaws.com/img/tatemae_logo.png"

data-display-branding

To show or hide the branding in the lower right corner of the modal. This can be true or false. It defaults to true.

data-display-branding=true

data-transcript-highlight

Accepts pure css for styling the highlighting.

data-transcript-highlight="background-color: green;"

data-transcript-position-style

Accepts pure css for styling the current possition in the transcript.

data-transcript-position-style="border-bottom: 2px solid orange;"

data-transcript-width

Sets the width of the transcript in px.

data-transcript-width="500"

data-transcript-height

Sets the height of the transcript in px.

data-transcript-height="600"

data-autostart

To autostart playing the video. This can be true or false. Defaults to false.

data-autostart=true

data-autostart-cc

To autostart the closed captioning inside the video player. Defaults to false. This will auto start the closed captioning on the transcript that is listed for the data-default-locale. So if we have data-default-locale="en-US" then it will find the transcript for "en-US" and start that trascript up in the closed captioning.

data-autostart-cc=true

All together now

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="https://iihs-tatemae.s3.amazonaws.com/css/player.css" />
    <link rel="stylesheet" type="text/css" href="https://iihs-tatemae.s3.amazonaws.com/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://iihs-tatemae.s3.amazonaws.com/css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" type="text/css" href="https://iihs-tatemae.s3.amazonaws.com/css/bootstrap-modal.css" />
    <link rel="stylesheet" type="text/css" href="https://iihs-tatemae.s3.amazonaws.com/css/bootstrap-select.min.css" />
    <link rel="stylesheet" type="text/css" href="https://iihs-tatemae.s3.amazonaws.com/css/bootstrap-glyphicons.css" />

  </head>
  <body>

    <div
    class="vidinfo-inline"
    data-id="walter_lewin"
    data-title="Some sort of classroom video"
    data-speaker="Prof. Walter Lewin"
    data-speaker-location="Neverland, USA"
    data-autostart=false
    data-video-srcs='{"144p":"https://iihs-tatemae.s3.amazonaws.com/video/Lec_1_801_Physics_I_Classical_Mechanic_Fall_1999_Low_Quality_144p.mp4","240p":"https://iihs-tatemae.s3.amazonaws.com/video/Lec_1_801_Physics_I_Classical_Mechanics_Fall_1999_Low_Quality_240p.mp4","360p":"https://iihs-tatemae.s3.amazonaws.com/video/Lec_1_801_Physics_I_Classical_Mechanics_Fall_1999_Standard_Quality_360p.mp4"}'
    data-video-width="320"
    data-video-height="240"
    data-preview-src="https://iihs-tatemae.s3.amazonaws.com/img/Walter_Lewin.png"
    data-default-locale="en-US"
    data-transcripts='{"en-US":"https://iihs-tatemae.s3.amazonaws.com/transcripts/lec1-edit.vtt","hi-IN":"https://iihs-tatemae.s3.amazonaws.com/transcripts/lec1-edit-bfcoder.vtt"}'
    data-transcript-highlight="#FFFFFF"
    data-branding-src="https://iihs-tatemae.s3.amazonaws.com/img/tatemae_logo.png"
    data-display-branding=true
    data-transcript-position-style="border-bottom: 2px solid orange;"
    data-transcript-width="320"
    data-transcript-height="210"
    data-autostart=false
    data-autostart-cc=true >
    </div>

    <div id="player-frame" class="modal hide fade" tabindex="-1" data-width="760">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3></h3>
      </div>
      <div class="modal-body">
        <div class="row-fluid">
          <div class="span6">
            <div class="player-control">
              <div id="player_"></div>
              <div class="player-speaker"></div>
              <div class="player-speaker-location"></div>
            </div><!-- player-control -->
          </div>
          <div class="span6">
            <div class="transcript-control">
              <div class="search-control">
                <span class="search-count"></span> <input class="search" type="text" size="15" value="Search transcript" />
              </div>
              <div class="transcript" class="pane"></div>
              <div class="transcript-search" class="pane"></div>
              <div class="control">
                <div class="control-selector">
                  <select class="selectpicker transcript-locale-selector"></select>
                </div>
              </div>
            </div><!-- transcript-control -->
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <img class="branding" src="" alt="" />
      </div>
    </div><!--player-frame-->

    <script type="text/javascript" src="https://iihs-tatemae.s3.amazonaws.com/js/parser.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="https://iihs-tatemae.s3.amazonaws.com/js/jquery.scrollTo.min.js"></script>
    <script type="text/javascript" src="https://iihs-tatemae.s3.amazonaws.com/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://iihs-tatemae.s3.amazonaws.com/js/bootstrap-modal.js"></script>
    <script type="text/javascript" src="https://iihs-tatemae.s3.amazonaws.com/js/bootstrap-modalmanager.js"></script>
    <script type="text/javascript" src="https://iihs-tatemae.s3.amazonaws.com/js/bootstrap-select.min.js"></script>
    <script src="http://jwpsrv.com/library/jLEt7AN+EeO1uxIxOUCPzg.js"></script> <!-- JW Player -->
    <script type="text/javascript" src="https://iihs-tatemae.s3.amazonaws.com/js/player.js"></script>


    <script type="text/javascript">
      $(document).ready(function() {
        SMPlayer.init();
      });
    </script>
  </body>
</html>

iihs's People

Contributors

bfcoder avatar tatemae avatar

Watchers

Joel Duffin avatar avatar James Cloos avatar

iihs's Issues

Make the inline player responsive.

Create a new web page to demonstrate this with two videos in it.

Float left the player and transcript
set min and max width on the player and transcript containers.
set percentage width for the player and transcript containers.

Create an admin UI for generating the HTML embed code

-- Left / Right Display or Top / bottom display of the video and transcript box,
-- Video dimensions
-- Transcript dimensions, font face and size, underline color
-- Audio track (will be English only for the forseeable future, but this would involve switching the video that's played)
-- Transcript languages may be multiple, probably needs an upload transcript file (assume the file is properly prepared)

Add speaker location under video

on the main page, each speaker has their name and location under the image. put the location under the name in the modal and inline version

add new Scot Osterweil video

http://d1baxxa0joomi3.cloudfront.net/dbea344bdf04f397bac087902155a5be/basic.mp4 - "width":480,"bitrate":500,"label":"500k","isDefault":true}
http://d1baxxa0joomi3.cloudfront.net/dbea344bdf04f397bac087902155a5be/small.mp4 - "width":480,"bitrate":800,"label":"800k","isDefault":false}
http://d1baxxa0joomi3.cloudfront.net/dbea344bdf04f397bac087902155a5be/medium.mp4 - "width":1024,"bitrate":1500,"label":"1500k","isDefault":false}
http://d1baxxa0joomi3.cloudfront.net/dbea344bdf04f397bac087902155a5be/large.mp4 - "width":1280,"bitrate":2600,"label":"2600k","isDefault":false}

The thumbnail is in a different bucket:

http://duqmab81lwd47.cloudfront.net/dbea344bdf04f397bac087902155a5be/thumbnails/thumb.jpg

vtt: https://iihs-tatemae.s3.amazonaws.com/transcripts/Week_1-Scot_Osterweil-HD_720p-final.vtt

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.