141 lines
3.8 KiB
Plaintext
141 lines
3.8 KiB
Plaintext
| {% extends "nodes/view_base.html" %}
|
|
|
|
| {% block node_preview %}
|
|
| {% if node.video_sources %}
|
|
section.node-preview.video
|
|
video#videoplayer.video-js(
|
|
controls,
|
|
data-setup="{}",
|
|
preload="auto",
|
|
poster="{% if node.picture %}{{ node.picture.thumbnail('l', api=api) }}{% endif %}")
|
|
| {% for source in node.video_sources %}
|
|
source(
|
|
src="{{ source.src }}",
|
|
type="{{ source.type }}")
|
|
| {% endfor %}
|
|
p.vjs-no-js.
|
|
To view this video please enable JavaScript, and consider upgrading to a web browser that
|
|
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
|
|
| {% else %}
|
|
| {% include 'nodes/custom/_node_preview_forbidden.html' %}
|
|
| {% endif %}
|
|
| {% endblock node_preview %}
|
|
|
|
| {% block node_download %}
|
|
| {% if node.file_variations %}
|
|
button.btn.btn-outline-primary.dropdown-toggle.px-3(
|
|
type="button",
|
|
data-toggle="dropdown",
|
|
aria-haspopup="true",
|
|
aria-expanded="false")
|
|
i.pi-download
|
|
| Download
|
|
i.pi-angle-down.icon-dropdown-menu
|
|
|
|
ul.dropdown-menu.dropdown-menu-right
|
|
| {% for variation in node.file_variations %}
|
|
li
|
|
a(href="{{ variation.link }}",
|
|
title="Download this format",
|
|
download)
|
|
span.length {{ variation.length | filesizeformat }}
|
|
|
|
span.format {{ variation.format }}
|
|
span.size {{ variation.size }}
|
|
| {% endfor %}
|
|
| {% endif %}
|
|
| {% endblock node_download %}
|
|
|
|
|
|
| {% block node_scripts %}
|
|
script(type="text/javascript").
|
|
{% if node.video_sources %}
|
|
|
|
var videoPlayer = document.getElementById('videoplayer');
|
|
var options = {
|
|
controlBar: {
|
|
volumePanel: { inline: false }
|
|
},
|
|
playbackRates: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 4]
|
|
};
|
|
|
|
videojs(videoPlayer, options).ready(function() {
|
|
this.ga({
|
|
'eventLabel' : '{{ node._id }} - {{ node.name }}',
|
|
'eventCategory' : '{{ node.project }}',
|
|
'eventsToTrack' : ['start', 'error', 'percentsPlayed']
|
|
});
|
|
|
|
this.hotkeys({
|
|
enableVolumeScroll: false,
|
|
customKeys: {
|
|
KeyL: {
|
|
key: function(event) {
|
|
return (event.which === 76);
|
|
},
|
|
handler: function(player, options, event) {
|
|
videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
this.rememberVolumePlugin();
|
|
|
|
{% if current_user.is_authenticated %}
|
|
let fetch_progress_url = '{{ url_for("users_api.get_video_progress", video_id=node._id) }}';
|
|
let report_url = '{{ url_for("users_api.set_video_progress", video_id=node._id) }}';
|
|
|
|
this.progressPlugin({
|
|
'report_url': report_url,
|
|
'fetch_progress_url': fetch_progress_url,
|
|
});
|
|
|
|
{% endif %}
|
|
});
|
|
|
|
// Generic utility to add-buttons to the player.
|
|
function addVideoPlayerButton(data) {
|
|
|
|
var controlBar,
|
|
newButton = document.createElement('button'),
|
|
buttonContent = document.createElement('span');
|
|
|
|
newButton.className = 'vjs-control vjs-button ' + data.class;
|
|
buttonContent.className = 'vjs-icon-placeholder';
|
|
newButton.setAttribute('title', data.title);
|
|
|
|
newButton.appendChild(buttonContent);
|
|
controlBar = document.getElementsByClassName('vjs-control-bar')[0];
|
|
insertBeforeButton = document.getElementsByClassName('vjs-fullscreen-control')[0];
|
|
controlBar.insertBefore(newButton, insertBeforeButton);
|
|
|
|
return newButton;
|
|
}
|
|
|
|
// Video loop stuff. TODO: Move it to video_plugins.js
|
|
var videoPlayerLoopButton = addVideoPlayerButton({
|
|
player: videoPlayer,
|
|
class: 'vjs-loop-button',
|
|
icon: 'pi-replay',
|
|
title: 'Loop'
|
|
});
|
|
|
|
function videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton) {
|
|
if (videoPlayer.loop){
|
|
videoPlayer.loop = false;
|
|
$(videoPlayerLoopButton).removeClass('vjs-control-active');
|
|
} else {
|
|
videoPlayer.loop = true;
|
|
$(videoPlayerLoopButton).addClass('vjs-control-active');
|
|
}
|
|
}
|
|
|
|
videoPlayerLoopButton.onclick = function() {
|
|
videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton);
|
|
};
|
|
|
|
{% endif %} // if node.video_sources
|
|
|
|
| {% endblock node_scripts %}
|