Paid-by-themewiki.top
zonyone1 code

Trang chủ  ›  blospot  ›  code

Responsive Video (and Audio) Player with playlist, captions and transcript

a la/s Đăng nhận xét

Media (Multi Video)

Media (Multi Audio)

Media (Single Video)

Media (Single Audio)

HTML AND CSS

 // Existing CSS
$question-bg: #f2f2f2;
$brand-secondary: #008bbd !default;

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

body {
    font-size: 13.5px;
}

.wrapper.activity.media.activity-wrapper {
    border: 1px solid #ddd;
}
.wrapper.activity-wrapper {
    margin: 30px 0;
    background: #d3d3d3;
    overflow: auto;
    position: relative;
}
.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
audio,
video {
    display: inline-block;
    vertical-align: bottom;
    width: 100%;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}

.wrapper.activity.media.activity-wrapper {
    border: 1px solid #ddd;

    .transcript {
        background-color: #fff;
        padding: 1rem;
        p {
            margin-bottom: 0;
        }
        .view-transcript-link {
        }
    }

    .question-text {
        background: $question-bg;
        padding: 12px;
        p {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .media-library {
        border-top: 1px solid #222222;
        overflow-y: auto;
        max-height: 155px;
        border-bottom: 1px solid #222222;
    }

    .video-library-item {
        border: 1px solid #222222;
        border-top: 0;
        cursor: pointer;
        background: #3e3e3e;
        transition: 0.2s ease;
        overflow: hidden;
        padding: 0;

        &:last-of-type {
            border-bottom: 0;
        }

        &:hover, &.active {
            background: #5a5a5a;

            .img-thumbnail {
                outline: 100px solid rgba(255, 255, 255, 0.2);
                outline-offset: -100px;
            }
        }

        &.selected {
            background: #222222;
            cursor: default;
        }
    }

    .video-item,
    .video-thumb {
        width: 100% !important;
        float: left;

        .img-thumbnail,
        h4.media-library-item-title,
        p.media-library-item-summary {
            display: inline-block;
            float: left;
        }

        .img-thumbnail {
            width: 25%;
            padding: 0;
            border: 0;
            border-right: 1px solid #222222;
            outline: 100px solid rgba(255, 255, 255, 0);
            outline-offset: -100px;
        }

        h4.media-library-item-title,
        p.media-library-item-summary {
            width: 75%;
            padding: 8px;
            margin: 0;
            color: #ffffff;
        }

        p.media-library-item-summary {
            padding-top: 0;
        }
    }
}

audio,
video {
    display: inline-block;
    vertical-align: bottom;
    width: 100%;
}

.audio-button.glyphicon {
    font-size: 18px !important;
    top: 4px !important;
    display: inline-block;
    padding: 10px;
    margin: -14px -10px !important;
    cursor: pointer;

    &:before {
        border-radius: 3px;
        padding: 2px 5px;
        border: 1px solid transparent;
    }

    &:hover {
        &:before {
            border: 1px solid #cccccc;
            transition: 0.2s ease !important;
            //background: #ffffff;
            -webkit-box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.4);
            box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.4);
        }
    }

    &.selected {
        color: $brand-secondary;
        //cursor: default;
        border-color: transparent;

        &:before {
            border: 1px solid #cccccc;
            transition: 0.2s ease !important;
            background: #ffffff;
            -webkit-box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0);
            -moz-box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0);
            box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0);
        }

        &:hover {
            &:before {
                -webkit-box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.4);
                -moz-box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.4);
                box-shadow: 0px 0px 5px -2px rgba(0, 0, 0, 0.4);
            }
        }
    }
}

.media-library-item-title {
    padding-left: 5px;
}

video::-webkit-media-controls-panel {
}

video::-internal-media-controls-download-button {
    display: none;
}

//- Media Queries
@media (max-width: 620px) {
    video::-webkit-media-controls-volume-slider,
    video::-webkit-media-controls-timeline {
        color: #c8c8c8;
    }

    .wrapper.activity.media.activity-wrapper {
        .question-text {
            padding: 8px;
        }
    }

    .wrapper.activity.media.activity-wrapper .video-item:hover .img-thumbnail {
        outline: 70px solid rgba(255, 255, 255, 0.2);
        outline-offset: -70px;
    }
}

//- Accessible Version
.accessible-version {
    .wrapper.activity.media.activity-wrapper {
        border: 0;
        padding: 0;
    }
}


.margin-top {
    margin-top: 20rem;
}




// ============================================================
// New CSS
// ============================================================
.activity-wrapper {
    max-width: 746px;
}

.wrapper.activity.media.activity-wrapper {
    .video-toolbar, .audio-toolbar {
        background-color: #fafafa;
        padding: 0.5rem 0.7rem;
        text-align: right;
        padding-right: 6px;
        button {
            background-color: transparent;
            border: none;
            padding-left: 0;
            padding-right: 0;
            color: #5a5a5a;
            &:hover {
                color: #5a5a5a;
            }
            &:active {
                outline: none;
            }
        }
        &.firefox {
            background-color: #141415;
            padding-right: 17px;
            button {
                color: #ffffff;
                &:hover {
                    color: #48a0f7;
                }
            }
        }
        &.safari {
            background-color: #292929;
            padding-right: 8px;
            button {
                color: #9c9c9c;
                font-weight: 300;
                &:hover {
                    color: #9c9c9c;
                }
                &:active {
                    color: #ffffff;
                }
            }
        }
    }
    .media-library {
        border-top: none;
        border-bottom: none;
        margin: 0;
        padding: 0;
        list-style: none;
        &.hide-on-load {
          display: none;
        }
    }
    .media-library-item {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        
        &:last-of-type {
            .media-library-item-btn {
                border-bottom: 0;
            }
        }
    }
    .media-library-item-btn {
        display: block;
        width: 100% !important;
        border: 1px solid #757575;
        border-top: 0;
        cursor: pointer;
        background: #3e3e3e;
        transition: 0.2s ease;
        overflow: hidden;
        text-align: left;
        margin: 0;
        padding: 0;
        position: relative;
        
        &:after {
            content: '';
            //background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        &:focus {
            outline: 0;
        }

        &:hover, &:focus, &.active {
            background: #5a5a5a;
            &:after {
                -webkit-box-shadow: inset 0px 0px 0px 2px rgba(255,255,255,1);
                -moz-box-shadow: inset 0px 0px 0px 2px rgba(255,255,255,1);
                box-shadow: inset 0px 0px 0px 2px rgba(255,255,255,1);
            }
        }

        &.selected {
            background: #222222;
            cursor: default;
        }

        .img-thumbnail,
        h4.media-library-item-title,
        p.media-library-item-summary {
            display: inline-block;
            float: left;
        }

        .img-thumbnail {
            border-radius: 0;
            width: 25%;
            padding: 0;
            border: 0;
            border-right: 1px solid #222222;
            // outline: 100px solid rgba(255, 255, 255, 0);
            // outline-offset: -100px;
        }

        h4.media-library-item-title,
        p.media-library-item-summary {
            width: 75%;
            padding: 8px;
            margin: 0;
            color: #ffffff;
        }

        p.media-library-item-summary {
            padding-top: 0;
        }
    }
    
    &.media {
        background: transparent;
    }
    .video-wrapper {
        background-color: #000;
    }
    .video-and-transcript-wrapper {
        display: block;
        background-color: #f0f0f0;
        .video-wrapper {
            width: 100%;
        }
    }
    .transcript-wrapper {
        background-color: #f0f0f0;
        display: none;
        position: relative;
        height: 100%;
        .transcript-middle {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            .transcript-inner {
                overflow: auto;
                padding: 1rem;
                line-height: 1.33333;
                font-size: 1.4rem;
            }
        }
        .cuepoint {
            &.active {
                color: #4688f1;
            }
        }
        p, h1, h2, h3, h4, h5, h6 {
            &:first-child {
                margin-top: 0;
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    .media-library-item {
        .img-thumbnail {
            display: none;
        }
    }
}
.wrapper.activity.media.activity-wrapper.media.show-transcript {
    .transcript-wrapper {
        display: block;
        height: 155px;
        overflow-y: auto;
    }
}



@media(min-width: 400px) {
    .wrapper.activity.media.activity-wrapper {
        .media-library-item {
            .img-thumbnail {
                display: block;
            }
        }
    }
}

@media(min-width: 600px) {
    .wrapper.activity.media.activity-wrapper {
        .video-and-transcript-wrapper {
            display: flex;
            -webkit-align-content: stretch;
            -ms-flex-line-pack: stretch;
            align-content: stretch;
            .video-wrapper {
                width: 100%;
            }
            
        }
        &.show-transcript {
            .video-and-transcript-wrapper {
                .video-wrapper {
                    width: 65%;
                }
                .transcript-wrapper {
                    display: block;
                    width: 35%;
                    height: auto;
                    .transcript-middle {
                        
                        .transcript-inner {
                            
                        }
                    }
                }
            }
        }
    }
}
  </style>
<h4>Media (Multi Video)</h4>

<div class="wrapper activity media activity-wrapper video" data-show-transcript-at-start="false">
    <div class="video-and-transcript-wrapper">
        <div class="video-wrapper">
            <div align="center" class="embed-responsive embed-responsive-16by9">
                <video class="embed-responsive-item" controls="controls" controlslist="nodownload" data-autoplay-on-select="true" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-video-poster-01.jpg" crossorigin="anonymous" data-showing-captions="false">
                    <source src="" type="video/mp4">
                </video>
            </div>
        </div>
        <div class="transcript-wrapper group">
            <div class="transcript-middle">
                <div class="transcript-inner"></div>
            </div>
        </div>
    </div>
    <div class="video-toolbar">
        <button class="btn-toggle-transcript">Show transcript</button>
    </div>
    <ol class="media-library hide-on-load">
        <li class="media-library-item col-sm-3">
            <button class="media-library-item-btn" data-video-src="https://www.youtube.com/embed/i7F94ZXeQiE" data-poster-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-video-poster-01.jpg"
                data-captions-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-captions-01.vtt" data-transcript-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-chapters-01.vtt">
                <img alt="Thumbnail image of video" class="img-thumbnail" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-video-thumbnail-01.jpg">
                <h4 class="media-library-item-title">Video Title 1</h4>
                <p class="media-library-item-summary">This is a longer test description</p>
            </button>
        </li>
        <li class="media-library-item col-sm-3">
            <button class="media-library-item-btn" data-video-src="https://player.vimeo.com/external/207590826.hd.mp4?s=6a918d074abf8f3add7858018855524d384f6934&amp;profile_id=119" data-poster-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-video-poster-02.jpg"
                data-captions-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-captions-02.vtt" data-transcript-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-chapters-02.vtt">
                <img alt="Thumbnail image of video" class="img-thumbnail" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-video-thumbnail-02.jpg">
                <h4 class="media-library-item-title">Video Title 2</h4>
                <p class="media-library-item-summary">This is a longer test description</p>
            </button>
        </li>
        <li class="media-library-item col-sm-3">
            <button class="media-library-item-btn" data-video-src="https://player.vimeo.com/external/207590786.hd.mp4?s=bcd80c5d2f6bf1bbad3b1a670ef93861e72f9683&amp;profile_id=119" data-poster-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-video-poster-03.jpg"
                data-captions-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-captions-03.vtt" data-transcript-src="">
                <img alt="Thumbnail image of video" class="img-thumbnail" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-video-thumbnail-03.jpg">
                <h4 class="media-library-item-title">Video Title 3</h4>
                <p class="media-library-item-summary">This is an even longer test description</p>
            </button>
        </li>
        <li class="media-library-item col-sm-3">
            <button class="media-library-item-btn" data-video-src="https://player.vimeo.com/external/207590615.hd.mp4?s=c4bce1872859889c86b688c26c60ed2b5734de28&amp;profile_id=119" data-poster-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-video-poster-04.jpg"
                data-captions-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-captions-04.vtt" data-transcript-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-transcript-04.txt">
                <img alt="Thumbnail image of video" class="img-thumbnail" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-video-thumbnail-04.jpg">
                <h4 class="media-library-item-title">Video Title 4</h4>
                <p class="media-library-item-summary">This is an longer test description than the previous one</p>
            </button>
        </li>
    </ol>
</div>


<h4 class="margin-top">Media (Multi Audio)</h4>

<div class="wrapper activity media activity-wrapper vue-media audio" data-show-transcript-at-start="false">
    <audio id="media-4" controlslist="" controls="controls" class="remove-accessible video-or-audio" crossorigin="anonymous" data-transcript-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-chapters-01.vtt" data-autoplay-on-select="true">
        <source src="">
    </audio>
    <div class="audio-toolbar chrome">
        <button class="btn-toggle-transcript">Show transcript</button>
    </div>
    <div class="transcript-wrapper group">
        <div class="transcript-middle">
            <div class="transcript-inner"></div>
        </div>
    </div>
    <ol class="media-library hide-on-load">
        <li class="media-library-item col-sm-3">
            <button class="media-library-item-btn" data-audio-src="http://content.jwplatform.com/videos/WslfBT8g-FKcaGLbx.m4a.mp3" 
                data-transcript-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-transcript-01.vtt">
                <h4 class="media-library-item-title">Audio Title 1</h4>
                <p class="media-library-item-summary">This is a longer test description</p>
            </button>
        </li>
        <li class="media-library-item col-sm-3">
            <button class="media-library-item-btn" data-audio-src="http://content.jwplatform.com/videos/WslfBT8g-FKcaGLbx.m4a.mp3" 
                data-transcript-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-transcript-02.vtt">
                <h4 class="media-library-item-title">Audio Title 2</h4>
                <p class="media-library-item-summary">This is a longer test description</p>
            </button>
        </li>
        <li class="media-library-item col-sm-3">
            <button class="media-library-item-btn" data-audio-src="http://content.jwplatform.com/videos/WslfBT8g-FKcaGLbx.m4a.mp3" 
                data-transcript-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-transcript-03.txt">
                <h4 class="media-library-item-title">Audio Title 3</h4>
                <p class="media-library-item-summary">This is a longer test description</p>
            </button>
        </li>
        <li class="media-library-item col-sm-3">
            <button class="media-library-item-btn" data-audio-src="http://content.jwplatform.com/videos/WslfBT8g-FKcaGLbx.m4a.mp3" 
                data-transcript-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-transcript-04.txt">
                <h4 class="media-library-item-title">Audio Title 4</h4>
                <p class="media-library-item-summary">This is a longer test description</p>
            </button>
        </li>
    </ol>
</div>



<h4 class="margin-top">Media (Single Video)</h4>

<div class="wrapper activity media activity-wrapper video" data-show-transcript-at-start="false">
    <div class="video-and-transcript-wrapper">
        <div class="video-wrapper">
            <div align="center" class="embed-responsive embed-responsive-16by9">
                <video class="embed-responsive-item" controls="controls" controlslist="nodownload" data-autoplay-on-select="true" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-video-poster-01.jpg" crossorigin="anonymous" data-showing-captions="false">
                    <source src="" type="video/mp4">
                </video>
            </div>
        </div>
        <div class="transcript-wrapper group">
            <div class="transcript-middle">
                <div class="transcript-inner"></div>
            </div>
        </div>
    </div>
    <div class="video-toolbar">
        <button class="btn-toggle-transcript">Show transcript</button>
    </div>
    <ol class="media-library hide-on-load">
        <li class="media-library-item col-sm-3">
            <button class="media-library-item-btn" data-video-src="https://player.vimeo.com/external/215175080.hd.mp4?s=5b17787857fd95646e67ad0f666ea69388cb703c&amp;profile_id=119" data-poster-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-video-poster-01.jpg"
                data-captions-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-captions-01.vtt" data-transcript-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-chapters-01.vtt">
                <img alt="Thumbnail image of video" class="img-thumbnail" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-video-thumbnail-01.jpg">
                <h4 class="media-library-item-title">Video Title 1</h4>
                <p class="media-library-item-summary">This is a longer test description</p>
            </button>
        </li>
    </ol>
</div>


<h4 class="margin-top">Media (Single Audio)</h4>

<div class="wrapper activity media activity-wrapper vue-media audio" data-show-transcript-at-start="false">
    <audio id="media-4" controlslist="" controls="controls" class="remove-accessible video-or-audio" crossorigin="anonymous" data-transcript-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-chapters-01.vtt" data-autoplay-on-select="true">
        <source src="">
    </audio>
    <div class="audio-toolbar chrome">
        <button class="btn-toggle-transcript">Show transcript</button>
    </div>
    <div class="transcript-wrapper group">
        <div class="transcript-middle">
            <div class="transcript-inner"></div>
        </div>
    </div>
    <ol class="media-library hide-on-load">
        <li class="media-library-item col-sm-3">
            <button class="media-library-item-btn" data-audio-src="http://content.jwplatform.com/videos/WslfBT8g-FKcaGLbx.m4a.mp3" 
                data-transcript-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/sample-transcript-01.vtt">
                <h4 class="media-library-item-title">Audio Title 1</h4>
                <p class="media-library-item-summary">This is a longer test description</p>
            </button>
        </li>
    </ol>
</div>

JS


$(function() {
  var CONST_SHOW_TRANSCRIPT_CLASS = 'show-transcript';
  var $btnToggleTranscript = $('.btn-toggle-transcript');
  var $mediaLibrary = $('.media-library');
  var $mediaLibraryItemBtn = $('.media-library-item-btn');
  var $activityMediaAudio = $('.activity.media.audio');
  var $activityMediaVideo = $('.activity.media.video');
  var ua = navigator.userAgent.toLowerCase();
  var browserClass = '';
  var $allAudioAndVideoElements = $('audio, video');
    
    
  $mediaLibrary.each(function() {
      $(this).find('.media-library-item-btn').first().addClass('active');
  });
  $mediaLibraryItemBtn.click(function() {
      var $activityMedia = $(this).closest('.activity.media');
      if ($activityMedia.hasClass('video')) {
          loadVideo($(this), true);
      } else if ($activityMedia.hasClass('audio')) {
          loadAudio($(this), true);
      }
  });

    
  $allAudioAndVideoElements.each(function() {
      $(this).on('play', function() {
          $allAudioAndVideoElements.not(this).each(function() {
              $(this)[0].pause();
          });
      });
  });
  
    
  if (ua.indexOf('chrome') > -1) {
      browserClass = 'chrome';
  } else if (ua.indexOf('safari') > -1) {
      browserClass = 'safari';
  } else if (ua.indexOf('firefox') > -1) {
      browserClass = 'firefox';
  }
    
    
  $activityMediaAudio.each(function() {
      var $activityWrapper = $(this);
      var $audio = $activityWrapper.find('audio');
      var $tracks = $audio.find('track');
      var $audioToolbar = $activityWrapper.find('.audio-toolbar');
      var $btnToggleTranscript = $audioToolbar.find('.btn-toggle-transcript');
      var $mediaLibrary = $activityWrapper.find('.media-library');
      var $mediaLibraryItemBtn = $mediaLibrary.find('.media-library-item-btn');
      
      var $firstVideoLibraryBtn = $mediaLibraryItemBtn.first();
      loadAudio($firstVideoLibraryBtn, false);
      
      if ($mediaLibraryItemBtn.length >= 2) {
        $mediaLibrary.removeClass('hide-on-load');
      }
      
      $audioToolbar.addClass(browserClass);
      
      var hasTranscript = false;
      if ($audio.data('transcriptSrc')) {
        hasTranscript = true;
      }
      if (hasTranscript) {
          if ($activityWrapper.data('showTranscriptAtStart')) {
              $activityWrapper.addClass(CONST_SHOW_TRANSCRIPT_CLASS);
              $audio.addClass(CONST_SHOW_TRANSCRIPT_CLASS);
              $btnToggleTranscript.text('Hide transcript');
          }
      } else {
          $btnToggleTranscript.hide();
      }

      if ($audioToolbar.children(':visible').length === 0) {
          $audioToolbar.hide();
      }
      
      $audio.on('pause seeking', function(evt) {
          var str = msToTimecode(evt.target.currentTime*1000);
          console.log(str);
      });
      $audio.on('timeupdate', function(evt) {
          var $audio = $(this);
          if ($audio.hasClass(CONST_SHOW_TRANSCRIPT_CLASS)) {
              var secs = evt.target.currentTime;
              var timecode = msToTimecode(secs*1000);
              var $activityWrapper = $audio.closest('.activity.media.audio');
              var $transcriptWrapper = $activityWrapper.find('.transcript-wrapper');
              var $cuePoints = $transcriptWrapper.find('.cuepoint');
              $cuePoints.removeClass('active');
              var $cuepoint, $activeCuepoint;
              $cuePoints.each(function(index) {
                  $cuepoint = $(this);
                  var startTime = $cuepoint.data('startTime');
                  var endTime = $cuepoint.data('endTime');
                  if (secs >= startTime && secs < endTime) {
                      $activeCuepoint = $cuepoint;
                      $activeCuepoint.addClass('active');
                      return false; 
                  }
              });
              // if ($activeCuepoint) {
              //     console.log($activeCuepoint);
              // }
          }
      });
  });
    
    
  $activityMediaVideo.each(function() {
      var $activityWrapper = $(this);
      var $video = $activityWrapper.find('video');
      var $tracks = $video.find('track');
      var $videoToolbar = $activityWrapper.find('.video-toolbar');
      var $btnToggleTranscript  = $videoToolbar.find('.btn-toggle-transcript');
      var $mediaLibrary = $activityWrapper.find('.media-library');
      var $mediaLibraryItemBtn = $mediaLibrary.find('.media-library-item-btn');
      
      var $firstVideoLibraryBtn = $mediaLibraryItemBtn.first();
      loadVideo($firstVideoLibraryBtn, false);

      if ($mediaLibraryItemBtn.length >= 2) {
        $mediaLibrary.removeClass('hide-on-load');
      }
      
      $videoToolbar.addClass(browserClass);
      
      $video.click(function() {
          var video = $(this)[0];
          if (video.paused) {
              video.play();
          } else {
              video.pause();
          }
      });
      
      var hasTranscript = false;
      $mediaLibraryItemBtn.each(function() {
          var $btn = $(this);
          if ( $btn.data('transcriptSrc')) {
              hasTranscript = true;
              return false;
          }
      });
      
      if (hasTranscript) {
          if ($activityWrapper.data('showTranscriptAtStart')) {
              $activityWrapper.addClass(CONST_SHOW_TRANSCRIPT_CLASS);
              $video.addClass(CONST_SHOW_TRANSCRIPT_CLASS);
              $btnToggleTranscript.text('Hide transcript');
          }
      } else {
          $btnToggleTranscript.hide();
      }
      
      if ($videoToolbar.children(':visible').length === 0) {
          $videoToolbar.hide();
      }

      $video.on('pause seeking', function(evt) {
          var str = msToTimecode(evt.target.currentTime*1000);
          console.log(str);
      });
      $video.on('timeupdate', function(evt) {
          var $video = $(this);
          if ($video.hasClass(CONST_SHOW_TRANSCRIPT_CLASS)) {
              var secs = evt.target.currentTime;
              var timecode = msToTimecode(secs*1000);
              var $videoAndTranscriptWrapper = $video.closest('.video-and-transcript-wrapper');
              var $cuePoints = $videoAndTranscriptWrapper.find('.cuepoint');
              $cuePoints.removeClass('active');
              var $cuepoint, $activeCuepoint;
              $cuePoints.each(function(index) {
                  $cuepoint = $(this);
                  var startTime = $cuepoint.data('startTime');
                  var endTime = $cuepoint.data('endTime');
                  if (secs >= startTime && secs < endTime) {
                      $activeCuepoint = $cuepoint;
                      $activeCuepoint.addClass('active');
                      return false; 
                  }
              });
              // if ($activeCuepoint) {
              //     console.log($activeCuepoint);
              // }
          }
      });
      
      var numTracks = $video[0].textTracks.length;
      for (var i = 0; i < numTracks; i++) {
          if ($video[0].textTracks[i].kind === 'chapters') {
              $video[0].textTracks[i].mode = 'showing';
          } else if ($video[0].textTracks[i].kind === 'captions') {
              $video[0].textTracks[i].mode = 'hidden';  
          }
      }
      $video.attr('data-showing-captions', 'false');

      var $captionsTrack = $video.find('track[kind="captions"]');
      $captionsTrack.on('load', function(evt) {
          var $activityMedia = $(this).closest('.activity.media.video');
          showCaptionsOnLoadIfPreviouslyShowing($activityMedia);
          setChaptersTrackModeToHidden($activityMedia);
      });
      
      var $chaptersTrack = $video.find('track[kind="chapters"]');
      $chaptersTrack.on('load', function(evt) {
          var $activityMedia = $(this).closest('.activity.media.video');
          createInteractiveTranscriptFromChapterVTT($activityMedia);
      });
  });
  
    
  $btnToggleTranscript.click(function() {
      var $toggleTranscriptBtn = $(this);
      var $activityWrapper = $toggleTranscriptBtn.closest('.activity-wrapper.media');
      var $nextSibling = $toggleTranscriptBtn.next();
      var $video = $activityWrapper.find('video');
      $activityWrapper.toggleClass(CONST_SHOW_TRANSCRIPT_CLASS);
      $video.toggleClass(CONST_SHOW_TRANSCRIPT_CLASS);
      if ($video.hasClass(CONST_SHOW_TRANSCRIPT_CLASS)) {
          $toggleTranscriptBtn.text('Hide transcript');
      } else {
          $toggleTranscriptBtn.text('Show transcript');
      }
  });
  
    
  function loadAudio($btn, triggeredByClick) {
      console.log('loadAudio()');
      var $item = $btn;
      var $activityWrapper = $item.closest('.activity.media.audio');
      var $audio = $activityWrapper.find('audio');
      var audioSrc = $item.data('audioSrc');
      var $transcriptInner = $activityWrapper.find('.transcript-inner');
      var transcriptSrc = $item.data('transcriptSrc');
      $item.closest('.media-library').find('.media-library-item-btn').removeClass('active');
      $item.addClass('active');
      
      console.log('transcriptSrc: ', transcriptSrc);
      
      $audio.find('source').attr('src', audioSrc);
      $audio[0].load();
      
      if ($audio.data('autoplayOnSelect') && triggeredByClick) {
        $audio[0].play();
      }
      
      $transcriptInner.html('');
      
      if (transcriptSrc) {
          var transcriptFileExtension = getExtensionFromUrl(transcriptSrc);

          if (transcriptFileExtension === 'vtt') {
              $audio.find('track[kind="chapters"]').remove();
              $audio.append('');
              var $chaptersTrack = $audio.find('track[kind="chapters"]');
              $chaptersTrack.on('load', function(evt) {
                  var $activityMedia = $(this).closest('.activity.media.audio');
                  createInteractiveTranscriptFromChapterVTT($activityMedia);
              });
          } else if (transcriptFileExtension === 'txt') {
              $.ajax({
                  url : transcriptSrc,
                  dataType: "text",
                  success : function (data) {
                      data = data.replace(/^(\n{2,})/gm, '\n');
                      data = data.replace(/\n/g, '
');
                      let array = data.split('

');
                      array = array.map(function(line) {
                          return '
' + line + '
\n';
                      });
                      data = array.join('\n');
                      $transcriptInner.html(data);
                      $transcriptInner.scrollTop(0);
                  }
              });
          }
      }
  }


  function loadVideo($btn, triggeredByClick) {
      var showingCaptions = undefined;
      var $item = $btn;
      var $activityWrapper = $item.closest('.activity.media.video');
      var $video = $activityWrapper.find('video');
      var numTracks = $video[0].textTracks.length;
      var $transcriptInner = $activityWrapper.find('.transcript-inner');
      var videoSrc = $item.data('videoSrc');
      var captionsSrc = $item.data('captionsSrc');
      var captionsLang = $item.data('captionsLang');
      var captionsLabel = $item.data('captionsLabel');
      var posterSrc = $item.data('posterSrc');
      var transcriptSrc = $item.data('transcriptSrc');
      $item.closest('.media-library').find('.media-library-item-btn').removeClass('active');
      $item.addClass('active');
      
      for (var i = 0; i < numTracks; i++) {
          if ($video[0].textTracks[i].kind === 'captions') {
              if ($video[0].textTracks[i].mode === 'showing') {
                  showingCaptions = true;
                  $video.attr('data-showing-captions', 'true');
              } else {
                  showingCaptions = false;
                  $video.attr('data-showing-captions', 'false');
              }
              $video[0].textTracks[i].mode = 'hidden'; 
          } else if ($video[0].textTracks[i].kind === 'chapters') {
              $video[0].textTracks[i].mode = 'hidden';
          }
      }
      
      $video.find('source').attr('src', videoSrc);
      
      $video.find('track[kind="captions"]').remove();
      $video.append('');
      var $captionsTrack = $video.find('track[kind="captions"]');
      $captionsTrack.on('load', function(evt) {
          var $activityMedia = $(this).closest('.activity.media.video');
          showCaptionsOnLoadIfPreviouslyShowing($activityMedia);
          setChaptersTrackModeToHidden($activityMedia);
      });
      
      $video[0].load();
      if ($video.data('autoplayOnSelect') && triggeredByClick) {
        $video.attr('poster', '');
        $video[0].play();
      } else {
        $video.attr('poster', posterSrc);
      }
      
      var numTracks = $video[0].textTracks.length;
      for (var i = 0; i < numTracks; i++) {
          if ($video[0].textTracks[i].kind === 'chapters') {
              $video[0].textTracks[i].mode = 'showing';
          } else if ($video[0].textTracks[i].kind === 'captions') {
              $video[0].textTracks[i].mode = 'hidden';
          }
      }
      
      $transcriptInner.html('');
      
      if (transcriptSrc) {
          var transcriptFileExtension = getExtensionFromUrl(transcriptSrc);

          if (transcriptFileExtension === 'vtt') {
              $video.find('track[kind="chapters"]').remove();
              $video.append('');
              var $chaptersTrack = $video.find('track[kind="chapters"]');
              $chaptersTrack.on('load', function(evt) {
                  var $activityMedia = $(this).closest('.activity.media.video');
                  createInteractiveTranscriptFromChapterVTT($activityMedia);
              });
          } else if (transcriptFileExtension === 'txt') {
              $.ajax({
                  url : transcriptSrc,
                  dataType: "text",
                  success : function (data) {
                      data = data.replace(/^(\n{2,})/gm, '\n');
                      data = data.replace(/\n/g, '
');
                      let array = data.split('

');
                      array = array.map(function(line) {
                          return '
' + line + '
\n';
                      });
                      data = array.join('\n');
                      $transcriptInner.html(data);
                      $transcriptInner.scrollTop(0);
                  }
              });
          }
      }
  }
    
    
  function getExtensionFromUrl(url) {
      var extension = '';
      var pattern = /\.([0-9a-z]+)(?:[\?#]|$)/i;
      if (url.match(pattern) && url.match(pattern)[1]) {
          extension = url.match(pattern)[1];
      }
      return extension;
  }
  
  
  function showCaptionsOnLoadIfPreviouslyShowing($activityMedia) {
      var $audioOrVideoElement;
      if ($activityMedia.hasClass('video')) {
          $audioOrVideoElement  = $activityMedia.find('video');
      } else if ($activityMedia.hasClass('audio')) {
          $audioOrVideoElement  = $activityMedia.find('audio');   
      } else {
          return false;
      }
      if ($audioOrVideoElement.attr('data-showing-captions') === 'true') {
          var numTracks = $audioOrVideoElement[0].textTracks.length;
          for (var i = 0; i < numTracks; i++) {
              if ($audioOrVideoElement[0].textTracks[i].kind === 'captions') {
                  $audioOrVideoElement[0].textTracks[i].mode = 'showing';
              }
          }
      }
  }
  
  
  function setChaptersTrackModeToHidden($activityMedia) {
      var $audioOrVideoElement;
      if ($activityMedia.hasClass('video')) {
          $audioOrVideoElement  = $activityMedia.find('video');
      } else if ($activityMedia.hasClass('audio')) {
          $audioOrVideoElement  = $activityMedia.find('audio');   
      } else {
          return false;
      }
      var numTracks = $audioOrVideoElement[0].textTracks.length;
      for (var i = 0; i < numTracks; i++) {
          if ($audioOrVideoElement[0].textTracks[i].kind === 'chapters') {
              $audioOrVideoElement[0].textTracks[i].mode = 'hidden';
          }
      }
  }
  
  
  function createInteractiveTranscriptFromChapterVTT($activityMedia) {
      var $audioOrVideoElement;
      if ($activityMedia.hasClass('video')) {
          $audioOrVideoElement  = $activityMedia.find('video');
      } else if ($activityMedia.hasClass('audio')) {
          $audioOrVideoElement  = $activityMedia.find('audio');   
      } else {
          return false;
      }
      var $transcriptInner = $activityMedia.find('.transcript-inner');
      var transcriptHtml = '';
      var textTracks = $audioOrVideoElement[0].textTracks;
      var numTracks = textTracks.length;
      var chaptersTrack = undefined;
      for (var i=0; i' + cues[i].text + '
';
        }
        $transcriptInner.html(transcriptHtml);
        var $cuepoints = $transcriptInner.find('.cuepoint');
        $cuepoints.click(function() {
            console.log('Cuepoint clicked')
            var $cuepoint = $(this);
            var $activityMedia = $cuepoint.closest('.activity.media');
            var $transcriptInner = $activityMedia.find('.transcript-inner');
            var $audioOrVideoElement;
            if ($activityMedia.hasClass('video')) {
                $audioOrVideoElement  = $activityMedia.find('video');
            } else if ($activityMedia.hasClass('audio')) {
                $audioOrVideoElement  = $activityMedia.find('audio');   
            } else {
                return false;
            }
            console.log('$audioOrVideoElement: ', $audioOrVideoElement);
            var $cuepoints = $transcriptInner.find('.cuepoint');
            $audioOrVideoElement[0].currentTime = $cuepoint.data('startTime');
            $cuepoints.each(function() {
                $(this).removeClass('active');
            });
            $cuepoint.addClass('active');
        });
      } else {
        console.log('No chapters track');
      }
  }
  
  
  function msToTimecode(durationInMs) {
      var milliseconds = parseInt((durationInMs%1000))
          , seconds = parseInt((durationInMs/1000)%60)
          , minutes = parseInt((durationInMs/(1000*60))%60)
          , hours = parseInt((durationInMs/(1000*60*60))%24);

      hours = (hours < 10) ? "0" + hours : hours;
      minutes = (minutes < 10) ? "0" + minutes : minutes;
      seconds = (seconds < 10) ? "0" + seconds : seconds;
      if (milliseconds < 10) {
          milliseconds = '00' + milliseconds;
      } else if (milliseconds < 100) {
          milliseconds = '0' + milliseconds;
      }
      return hours + ":" + minutes + ":" + seconds + "." + milliseconds;
  }
    
});
blospot code
SHARE WhatsApp

Related Posts

Đăng nhận xét

Đăng nhận xét