123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171 |
- <!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</title>
- <link rel="author" type="text/plain" href="humans.txt">
-
- <link rel="shortcut icon" href="./images/gnu-linux_libre.png">
-
- <link href="./css/normalize.css" rel="stylesheet" type="text/css">
-
- <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>
-
-
-
- <link href="./css/default/cliplibre-js.dev.css" rel="stylesheet" type="text/css">
-
- <link rel="stylesheet" href="./css/selector/video-quality-selector.css">
-
- <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 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.
- </p>
- <p>
- 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>
-
- <script>
-
-
- var estilos = document.getElementById("example");
- estilos.className += " cliplibre-js-responsive-container librevjs-hd cliplibre-js librevjs-default-skin";
-
- 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,
- });
- });
-
- </script>
-
-
-
-
-
- <footer>
- Basado en VideoJS, depurado y escrito por Jesús Eduardo en el año 2016 - <span id="year"></span>.
- </footer>
-
- <script src="./js/fecha.js"></script>
- </body>
- </html>
|