Sybren A. Stüvel
3f8e0396cf
The `registerPlugin()` call should only be done once, and not for every video shown. This removes the warning about the 'analytics' plugin already being registered, which you see when navigating from one video to another via the JSTree.
111 lines
2.8 KiB
Plaintext
111 lines
2.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-default.dropdown-toggle(
|
|
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
|
|
| {% 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 }
|
|
}
|
|
};
|
|
|
|
videojs(videoPlayer, options).ready(function() {
|
|
this.ga({
|
|
'eventLabel' : '{{ node._id }} - {{ node.name }}',
|
|
'eventCategory' : '{{ node.project }}',
|
|
'eventsToTrack' : ['start', 'error', 'percentsPlayed']
|
|
});
|
|
this.hotkeys();
|
|
|
|
});
|
|
|
|
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;
|
|
}
|
|
|
|
var videoPlayerLoopButton = addVideoPlayerButton({
|
|
player: videoPlayer,
|
|
class: 'vjs-loop-button',
|
|
icon: 'pi-replay',
|
|
title: 'Loop'
|
|
});
|
|
|
|
videoPlayerLoopButton.onclick = function() {
|
|
if (videoPlayer.loop){
|
|
videoPlayer.loop = false;
|
|
$(this).removeClass('vjs-control-active');
|
|
|
|
} else {
|
|
videoPlayer.loop = true;
|
|
$(this).addClass('vjs-control-active');
|
|
}
|
|
};
|
|
|
|
{% endif %} // if node.video_sources
|
|
|
|
| {% endblock node_scripts %}
|