aboutsummaryrefslogtreecommitdiffstats
path: root/demo-custom-material-multicolors.html
diff options
context:
space:
mode:
authorJesús Eduardo <heckyel@hyperbola.info>2017-07-15 16:06:57 -0500
committerJesús Eduardo <heckyel@hyperbola.info>2017-07-15 16:06:57 -0500
commitd20da4f325a0545b8fc6da4a785bc8d87dd91487 (patch)
treea2d6aea5ddec16a8d816c639001a519f8b878791 /demo-custom-material-multicolors.html
downloadlibrevideojs-d20da4f325a0545b8fc6da4a785bc8d87dd91487.tar.lz
librevideojs-d20da4f325a0545b8fc6da4a785bc8d87dd91487.tar.xz
librevideojs-d20da4f325a0545b8fc6da4a785bc8d87dd91487.zip
First commit
Diffstat (limited to 'demo-custom-material-multicolors.html')
-rw-r--r--demo-custom-material-multicolors.html251
1 files changed, 251 insertions, 0 deletions
diff --git a/demo-custom-material-multicolors.html b/demo-custom-material-multicolors.html
new file mode 100644
index 0000000..84c6dae
--- /dev/null
+++ b/demo-custom-material-multicolors.html
@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>Reproductor LibreVideoJS basado en VideoJS v4.3.</title>
+ <link rel="author" type="text/plain" href="humans.txt">
+ <!-- Favicon Libre -->
+ <link rel="shortcut icon" href="./images/gnu-linux_libre.png">
+ <!-- Normalizador -->
+ <link href="./css/normalize.css" rel="stylesheet" type="text/css">
+ <!--Begin | Estilos de la Página -->
+ <style>
+ body {
+ background-color: #141517;
+ color: white;
+ }
+
+ .change_color {
+ text-align: center;
+ }
+
+ .change_color input[type='Button'] {
+ display: inline-block;
+ border-style: none;
+ cursor: pointer;
+ font-size: 12px;
+ text-align: center;
+ margin-top: 10px;
+ padding: 5px 10px;
+ }
+
+ .change_color input[onclick="multiColor('teal');"] {
+ background-color: #2ecc71;
+ }
+
+ .change_color input[onclick="multiColor('blue');"] {
+ background-color: #3498db;
+ }
+
+ .change_color input[onclick="multiColor('yellow');"] {
+ background-color: #f1c40f;
+ }
+
+ .change_color input[onclick="multiColor('red');"] {
+ background-color: #e74c3c;
+ }
+
+ .change_color input[onclick="multiColor('purple');"] {
+ background-color: #9b59b6;
+ }
+
+ .change_color input[onclick="multiColor('grey');"] {
+ background-color: #9e9e9e;
+ }
+
+ h1,
+ h2,
+ h3 {
+ text-align: center;
+ }
+
+ a {
+ text-decoration: none;
+ color: #189e7d;
+ }
+
+ a:hover {
+ color: #1de9b6;
+ }
+
+ .clase1 {
+ margin: 20px;
+ }
+
+ p,
+ .clase2 {
+ margin: 20px;
+ }
+
+ footer {
+ background-color: #1e1b1f;
+ text-align: center;
+ margin: 20px;
+ padding: 10px;
+ }
+ </style>
+ <!-- Ending | Estilos de la Página -->
+ <!-- LibreVideoJS Estilos -->
+ <link rel="stylesheet" href="./css/selector/video-quality-selector.css">
+ <script>
+ /*
+ @licstart The following is the entire license notice for the
+ JavaScript code in this page.
+
+ Copyleft 2017 Jesús Eduardo.
+
+ The JavaScript code in this page is free software: you can
+ redistribute it and/or modify it under the terms of the GNU
+ General Public License (GNU GPL) as published by the Free Software
+ Foundation, either version 3 of the License, or (at your option)
+ any later version. The code is distributed WITHOUT ANY WARRANTY;
+ without even the implied warranty of MERCHANTABILITY or FITNESS
+ FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
+
+ As additional permission under GNU GPL version 3 section 7, you
+ may distribute non-source (e.g., minimized or compacted) forms of
+ that code without the copy of the GNU GPL normally required by
+ section 4, provided you include this license notice and a URL
+ through which recipients can access the Corresponding Source.
+
+ @licend The above is the entire license notice
+ for the JavaScript code in this page.
+ */
+ </script>
+ <!-- LibreVideoJS - estilos -->
+ <script>
+ var filename = "./css/librevideojs-material/libre-skin-teal.css";
+ var _color = location.search.split('color=')[1];
+ if (_color != undefined && _color != "" && _color != "teal")
+ filename = "./css/librevideojs-material/libre-skin-" + _color + ".css";
+ var fileref = document.createElement("link");
+ fileref.setAttribute("rel", "stylesheet");
+ fileref.setAttribute("type", "text/css");
+ fileref.setAttribute("href", filename);
+ document.getElementsByTagName("head")[0].appendChild(fileref);
+ </script>
+ <!--LibreVideoJS-->
+ <script src="js/cliplibrejs.dev.js"></script>
+</head>
+
+<body>
+ <header>
+ <h1>Reproductor LibreVideoJS</h1>
+ </header>
+ <section>
+ <h2>Sección Libre</h2>
+ <article class="clase1">
+ <h3>Vídeo de Software Libre</h3>
+ <video id="example" controls="controls" preload="none" poster="images/poster.jpg" data-setup="{}">
+ <source data-res="original" src="https://archive.org/download/libre848x476/libre640x480.ogv" type="video/ogg">
+ <source data-res="480p" src="https://archive.org/download/libre848x476/libre848x476.ogv" type="video/ogg">
+ <source data-res="240p" src="https://archive.org/download/libre848x476/libre320x240.ogv" type="video/ogg">
+ <source data-res="144p" src="https://archive.org/download/libre848x476/libre256x144.ogv" type="video/ogg">
+ <track kind="captions" src="./subtitles/libre_en.vtt" srclang="en" label="English">
+ <track kind="captions" src="./subtitles/libre_es.vtt" srclang="es" label="Español" default="">
+ <track kind="subtitles" src="./subtitles/libre_en.vtt" srclang="en" label="English">
+ <p class="no_html5">Lo siento, este navegador no soporta HTML 5. Por favor, cambia o actualiza tu navegador Web</p>
+ </video>
+ <div class="change_color">
+ <input type="Button" onclick="multiColor('teal');" value="teal">
+ <input type="Button" onclick="multiColor('blue');" value="blue">
+ <input type="Button" onclick="multiColor('yellow');" value="yellow">
+ <input type="Button" onclick="multiColor('red');" value="red">
+ <input type="Button" onclick="multiColor('purple');" value="purple">
+ <input type="Button" onclick="multiColor('grey');" value="grey">
+ </div>
+ </article>
+ </section>
+ <p>Conferencia de Richard M. Stallman en Retina | España</p>
+ <p>Puede: <a href="https://archive.org/download/libre848x476/libre640x480.ogv" download="Conferencia-de-Richard-M.-Stallman-en-Retina-España" target="_blank">Descargar el vídeo</a></p>
+ <aside class="clase2">
+ <h3>¿Qué es el software Libre?</h3>
+ <blockquote cite="https://www.gnu.org/home.es.html">
+ <p>
+ Software libre significa que los usuarios tienen la libertad de ejecutar, copiar, distribuir, estudiar, modificar y mejorar el software.
+ <br> El software libre es una cuestión de libertad, no de precio. Para entender el concepto, debe pensarse en «Libre» como en «Libertad de expresión», no como en «cerveza gratis».
+ </p>
+ </blockquote>
+ </aside>
+
+ <!-- Quality Selector + Hotkeys + Change of Colors-->
+ <script type="text/javascript">
+ // Insert class base
+ var estilos = document.getElementById("example");
+ estilos.className += " cliplibre-js-responsive-container librevjs-hd cliplibre-js librevjs-libre-skin";
+ // funciones
+ cliplibrejs('#example', {
+ plugins: {
+ resolutionSelector: {
+ force_types: ['video/webm', 'video/ogg'],
+ default_res: "480p",
+ }
+ },
+ nativeControlsForTouch: false
+ }).ready(function(){
+ this.hotkeys({
+ volumeStep: 0.1,
+ seekStep: 5,
+ enableMute: true,
+ enableFullscreen: true,
+ enableNumbers: true,
+ });
+ });
+ function multiColor(_color) {
+ history.replaceState({}, '', '?color=' + _color);
+ location.reload();
+ };
+ </script>
+
+ <!--
+ Abajo ↓ : Códigos individuales
+ -->
+
+ <!-- Quality Selector -->
+ <!--
+ <script type="text/javascript">
+ cliplibrejs('#example', {
+ plugins: {
+ resolutionSelector: {
+ force_types: ['video/webm', 'video/ogg'],
+ default_res: "480p"
+ }
+ },
+ nativeControlsForTouch: false
+ });
+
+ function multiColor(_color) {
+ history.replaceState({}, '', '?color=' + _color);
+ location.reload();
+ };
+ </script>
+ -->
+
+ <!-- Hotkeys -->
+ <!--
+ <script>
+ // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
+ cliplibrejs('#example').ready(function() {
+ this.hotkeys({
+ volumeStep: 0.1,
+ seekStep: 5,
+ enableMute: true,
+ enableFullscreen: true,
+ enableNumbers: true
+ });
+ });
+ // @license-end
+ </script>
+ -->
+
+ <footer>
+ Basado en VideoJS, depurado y escrito por Jesús Eduardo en el año 2016 - <span id="year"></span>.
+ </footer>
+ <!--Script NO necesario | solo para la fecha-->
+ <script src="./js/fecha.js"></script>
+</body>
+
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2025-07-17 09:06:47 +0000