Paid-by-themewiki.top
zonyone1 code

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

Đă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; } });
ZONY NGUYỄN
Tôi yêu thích công nghệ thông tin, và tôi muốn hỗ trợ bạn trong những lĩnh vực tôi biết, đồng hành cùng zony là chương trình kết nối giữa tôi và những người bạn

Related Posts

Đăng nhận xét