API tools faq
paste
Advertisement
homzode

html_curso

homzode
Aug 21st, 2023 (edited)
1,314
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.11 KB | None | 0 0
raw download clone embed print report
  1. Archivo video.html
  2. <!DOCTYPE html>
  3. <html>
  4.   <head>
  5.     <link href="style.css" rel="stylesheet">
  6.   </head>
  7.   <body>
  8.     <video autoplay controls >
  9.       <source src="/datos/laboratorio/java_mio/media_store/stressed.mp4" type=video/mp4>
  10.     </video>
  11.   </body>
  12. </html>
  13.  
  14. Archivo style.css
  15. html {
  16.   box-sizing: border-box;
  17.   background-color: transparent;
  18.  
  19. }
  20. body {
  21.     margin: 0px;
  22.     padding: 0px;
  23.     background-color: transparent;
  24. }
  25. video{
  26.   position: fixed;
  27.   top: 0;
  28.   left: 0;
  29.   width: 100vw;
  30.   height: 100vh;
  31.   object-fit: fill;
  32. }
  33. *******************
  34. HTML JavaScript enviar parámetros a la página
  35. Archivo video.html
  36. <!DOCTYPE html>
  37. <html>
  38.   <head>
  39.     <link href="style.css" rel="stylesheet">
  40.   </head>
  41.   <body>
  42.     <div id="cont">
  43.         <video autoplay id="vplayer"  preload="none" controls >
  44.  
  45.         </video>
  46.     </div>
  47.     <script>
  48.         var url_3 = window.location.href;
  49.         var tmp = url_3.split("?");
  50.         var source =  document.getElementById("vplayer");
  51.         source.innerHTML = "<source src='"+tmp[1]+"' type='video/mp4'>"
  52.     </script>
  53.   </body>
  54. </html>
  55.  
  56. Archivo style.css
  57. html {
  58.   box-sizing: border-box;
  59.   background-color: transparent;
  60.  
  61. }
  62. body {
  63.     margin: 0px;
  64.     padding: 0px;
  65.     background-color: transparent;
  66. }
  67. div{
  68.     position: absolute;
  69.     top: 0;
  70.     left: 0;
  71.     overflow: hidden;
  72.     width: 100%;
  73.     height: 100%;
  74.     background-color: transparent;
  75. }
  76. video{
  77.   /*position: fixed;*/
  78.   top: 0;
  79.   left: 0;
  80.   width: 100vw;
  81.   height: 100vh;
  82.   object-fit: fill;
  83.   /*object-fit: cover;*/
  84. }
  85.  
  86. /* Video properties controls table hide*/
  87. .vjs-hidden {
  88.   display: none !important;
  89. }
  90. /* Big play button hide*/
  91. .vjs-controls-disabled .vjs-big-play-button,
  92. .vjs-has-started .vjs-big-play-button,
  93. .vjs-using-native-controls .vjs-big-play-button{
  94. /*.vjs-error .vjs-big-play-button {*/
  95.   display: none;
  96. }
  97. .vjs-text-track-display {
  98.   display: none;
  99.   pointer-events: none;
  100. }
  101. .vjs-controls-disabled .vjs-control-bar,
  102. .vjs-using-native-controls .vjs-control-bar{
  103. /*.vjs-error .vjs-control-bar {*/
  104.   display: none !important;
  105. }
  106.  
  107. /* Error message signal X */
  108. .vjs-error .vjs-error-display .vjs-modal-dialog-content {
  109.   font-size: 1.1em;
  110.   text-align: center;
  111.   top: 50%;
  112.   left: 5%;
  113.   width: 70%;
  114. }
  115.  
  116. .vjs-error .vjs-error-display:before {
  117.   color: #fff;
  118.   content: "Fallo";
  119.   font-family: Arial, Helvetica, sans-serif;
  120.   font-size: 2em;
  121.   left: 0;
  122.   line-height: 1;
  123.   margin-top: -0.5em;
  124.   position: absolute;
  125.   text-shadow: 0.05em 0.05em 0.1em #000;
  126.   text-align: center;
  127.   top: 40%;
  128.   vertical-align: middle;
  129.   width: 80%;
  130. }
  131. /*progress bar*/
  132. .vjs-loading-spinner {
  133.   display: none;
  134.   visibility: hide;
  135. }
  136.  
  137. button {
  138.     background-color: #666;
  139.     border: medium none;
  140.     color: #fff;
  141.     display: block;
  142.     font-size: 18px;
  143.     width: 20%;
  144.     margin: 0 auto;
  145.     padding: 8px 16px;
  146.     position: absolute;
  147.     /*right: 0;*/
  148.     left: 10%;
  149.     top: 10%;
  150. }
  151. button.active {
  152.   background-color: #0077a2;
  153. }
  154. }
  155.  
  156. ********Reproducir Streaming m3u8 en HTML y JavaScript
  157. Las librerias: video.js, videojs-contrib-hls.js y video-js.css se descragan de internet o se enlazan sin descargar.
  158. Archivo: test_html_back.html
  159. <!DOCTYPE html>
  160.     <html>
  161.     <head>
  162.     <meta charset=utf-8 />
  163.     <title>Your title</title>
  164.       <link href="video-js.css" rel="stylesheet">
  165.       <script src="video.js"></script>
  166.       <script src="videojs-contrib-hls.js"></script>
  167.        
  168.     </head>
  169.     <body>
  170.          <video id="video" class="video-js" controls preload="none" crossorigin="true" >
  171.            <source src="https://5c3fb01839654.streamlock.net:1963/iptvantares/liveantarestv/playlist.m3u8" type="application/x-mpegURL">
  172.          </video>
  173.     <script>
  174.         var player = videojs('video');
  175.         player.play();
  176.  
  177.     </script>
  178.      
  179.     </body>
  180. </html>
  181.  
  182. ********Fuentes Formulario Registro
  183. Archivo: formreg.html
  184. <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
  185. <HTML>
  186.    <HEAD>
  187.       <TITLE>Formulario de registro </TITLE>
  188.       <link rel="stylesheet" href="guest.css" type="text/css"/>
  189.    </HEAD>
  190.     <BODY>
  191.        <H2>Ejemplo de fromulario HTML y CSS</H2>
  192.         <form class='register_form' id='register_form' >
  193.             <div id='doregister'>
  194.                 <ul><li><h2>Nuevo registro</h2>
  195.                     <span class='required_notification'>* Datos requeridos</span>
  196.                     <br>
  197.                         <span class='promocion'>Diligencie el formulário y envie su registro.</span>
  198.                     </br>
  199.                 </li>
  200.                     <li><label for='razon'>Nombres:</label> <input type='text' name='razon' placeholder='Nombres del usuario...' maxlength='98' pattern='[A-Za-z0-9ñÑáéíóúÁÉÍÓÚ. ]{1,98}' required/> </li>
  201.                     <li><label for='prop'>Apellidos:</label> <input type='text' name='prop' placeholder='Apellidos del usuario...' maxlength='58' pattern='[A-Za-z0-9ñÑáéíóúÁÉÍÓÚ. ]{1,58}' required/> </li>
  202.                     <li><label for='direccion'>Pais:</label> <input type='text' name='direccion' placeholder='Pais de residencia...' maxlength='98' pattern='[A-Za-z0-9\\.#\\- ]{1,98}' required/> </li>
  203.                     <li><label for='mail'>Correo:</label> <input type='email' name='mail' placeholder='[email protected]' maxlength='58' required/> </li>
  204.                     <li><label for='tel'>Teléfono:</label> <input type='number' name='tel' placeholder='Telefono de contacto...' maxlength='14' required/> </li>
  205.                     <li><label for='usuario'>Usuario:</label> <input type='text' id='usuario_in' name='usuario' placeholder='Usuario para acceso al sistema...' maxlength='14' pattern='[A-Za-z0-9]{1,14}' required/></li>
  206.                     <li><label for='clave'>Clave:</label> <input type='password' name='clave' placeholder='Clave para acceso al sistema, 4 números...' maxlength='4' pattern='[0-9]{1,4}' required/> </li>
  207.                     <li>
  208.                         <button id='submit' class='submit' type='submit' >Enviar registro</button>
  209.                     </li>
  210.                 </ul>
  211.             </div>
  212.         </form>
  213.     </BODY>
  214. </HTML>
  215.  
  216. Archivo: guest.css
  217. /*
  218.     Author     : homzode
  219. */
  220. @import url(https://fonts.googleapis.com/css?family=Roboto:300);
  221. body{  
  222.     width: 95%;
  223.     /*margin: auto;*/
  224.     min-width:600px;
  225.     max-width:1700px;
  226.     background-color: #8d7167;
  227. }
  228.  
  229. /*new record*/
  230. .register_form {
  231.     position: relative;
  232.     top: 20px;
  233.     left: 20px;
  234.     /*float: left;*/
  235.     background-color: rgba(216,214,218,1);
  236.     /*background-color: hsla(0, 100%, 30%, 0.7);*/
  237.     font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
  238.     width: 60%;
  239.     height: 85%;
  240.    
  241. }
  242. #doregister{
  243.     position: relative;
  244.     width: 100%;
  245.     height: 100%;
  246.     background-color: transparent;
  247.     /*display: block;
  248.     overflow: scroll;*/
  249.    
  250. }
  251. .promocion{
  252.     color: graytext;
  253.     margin: 5px 0 0 0;
  254.     display: inline;
  255.     float: left;
  256. }
  257. .register_form ul {
  258.     position: relative;
  259.     width: 100%;
  260.     height: 100%;
  261.     list-style-type: none;
  262.     list-style-position: outside;
  263.     overflow-x: hidden;
  264.     overflow-y: auto;
  265.     background-color: transparent;
  266.     margin: 0px;
  267.     padding: 0px;
  268. }
  269. .register_form ul li {
  270.     position: relative;
  271.     padding: 12px;
  272.     border-bottom: 1px solid #eee;
  273.     background-color: transparent;
  274.     display: block;
  275.     height: auto;
  276. }
  277. .register_form label {
  278.     width: 150px;
  279.     margin-top: 3px;
  280.     display: inline-block;
  281.     float: left;
  282.     padding: 3px;
  283. }
  284. .register_form h2 {
  285.     margin: 0;
  286.     display: inline;
  287. }
  288. .required_notification {
  289.     color: #d45252;
  290.     margin: 5px 0 0 0;
  291.     display: inline;
  292.     float: right;
  293. }
  294. .register_form h2, .register_form label {
  295.     font-family: Georgia, Times, "Times New Roman", serif;
  296. }
  297.  
  298.  
  299. .register_form input {
  300.     height: 30px;
  301.     width: 70%;
  302.     padding: 5px 8px;
  303.     background-color: transparent;
  304.     border: 0.10em solid #fff;
  305. }
  306.  
  307. .register_form input:focus {
  308.     background: #fff;
  309.     border: 1px solid #555;
  310.     box-shadow: 0 0 3px #aaa;
  311.     padding-right: 70px;
  312. }
  313. .register_form input:focus + .form_hint {
  314.     display: inline;
  315. }
  316. .register_form input:required:valid + .form_hint {
  317.     background: #28921f; }
  318. .register_form input:required:valid + .form_hint::before {
  319.     color: #28921f;
  320. }
  321. .register_form input:required {
  322.     background: transparent url(red_asterisk.png) no-repeat 98% center;
  323. }
  324. .register_form input:required:valid {
  325.     background: #fff url(valid.png) no-repeat 98% center; box-shadow: 0 0 5px #5cd053; border-color: #28921f; }
  326. .register_form input:focus:invalid {
  327.     background: #fff url(invalid.png) no-repeat 98% center; box-shadow: 0 0 5px #d45252; border-color: #b03535;
  328. }
  329. button.submit {
  330.     background-color: #68b12f;
  331.     background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
  332.     background: -webkit-linear-gradient(top, #68b12f, #50911e);
  333.     background: -moz-linear-gradient(top, #68b12f, #50911e);
  334.     background: -ms-linear-gradient(top, #68b12f, #50911e);
  335.     background: -o-linear-gradient(top, #68b12f, #50911e);
  336.     background: linear-gradient(top, #68b12f, #50911e);
  337.     border: 1px solid #509111;
  338.     border-bottom: 1px solid #5b992b;
  339.     border-radius: 3px;
  340.     -webkit-border-radius: 3px;
  341.     -moz-border-radius: 3px;
  342.     -ms-border-radius: 3px;
  343.     -o-border-radius: 3px;
  344.     box-shadow: inset 0 1px 0 0 #9fd574;
  345.     -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
  346.     -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
  347.     -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
  348.     -o-box-shadow: 0 1px 0 0 #9fd574 inset;
  349.     color: white;
  350.     font-weight: bold;
  351.     padding: 6px 20px;
  352.     text-align: center;
  353.     text-shadow: 0 -1px 0 #396715;
  354. }
  355. .register_form button {
  356.     margin-left: 156px;
  357. }
  358. button.submit:hover {
  359.     opacity: .85;
  360.     cursor: pointer;
  361. }
  362. button.submit:active {
  363.     border: 1px solid #20911e;
  364.     box-shadow: 0 0 10px 5px #356b0b inset;
  365.     -webkit-box-shadow: 0 0 10px 5px #356b0b inset;
  366.     -moz-box-shadow: 0 0 10px 5px #356b0b inset;
  367.     -ms-box-shadow: 0 0 10px 5px #356b0b inset;
  368.     -o-box-shadow: 0 0 10px 5px #356b0b inset;
  369. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!