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&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&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&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&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('
Đăng nhận xét
Đăng nhận xét