aboutsummaryrefslogtreecommitdiffstats
path: root/demo-custom-material.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.html
downloadlibrevideojs-d20da4f325a0545b8fc6da4a785bc8d87dd91487.tar.lz
librevideojs-d20da4f325a0545b8fc6da4a785bc8d87dd91487.tar.xz
librevideojs-d20da4f325a0545b8fc6da4a785bc8d87dd91487.zip
First commit
Diffstat (limited to 'demo-custom-material.html')
-rw-r--r--demo-custom-material.html165
1 files changed, 165 insertions, 0 deletions
diff --git a/demo-custom-material.html b/demo-custom-material.html
new file mode 100644
index 0000000..596b39f
--- /dev/null
+++ b/demo-custom-material.html
@@ -0,0 +1,165 @@
+<!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;
+ }
+
+ 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 href="./css/librevideojs-material/libre-skin-teal.css" rel="stylesheet" type="text/css">
+ <!-- LibreVideoJS Quality -->
+ <link rel="stylesheet" href="./css/selector/video-quality-selector.css">
+ <!--LibreVideoJS-Integrado(cliplibrejs + Selector + Hotkeys)-->
+ <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>
+ </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 -->
+ <script>
+ // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
+ // 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,
+ });
+ });
+ // @license-end
+ </script>
+
+ <!--
+ Abajo ↓ : Códigos individuales
+ -->
+
+ <!-- Quality Selector -->
+ <!--
+ <script type="text/javascript">
+ // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
+ cliplibrejs('#example', {
+ plugins: {
+ resolutionSelector: {
+ force_types: ['video/webm', 'video/ogg'],
+ default_res: "480p"
+ }
+ },
+ nativeControlsForTouch: false
+ });
+ // @license-end
+ </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 desde 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-06-16 00:32:18 +0000