Reproductor de lista de reproducción de vídeo dinámico en JavaScript

Vista prévia

Descripción

PixelMap. js es una pequeña biblioteca de manipulación de imágenes que le permite aplicar nuevos datos de píxel a la imagen original utilizando el lienzo de HTML5.

PixelMap. js es una pequeña biblioteca de manipulación de imágenes que le permite aplicar nuevos datos de píxel a la imagen original utilizando el lienzo de HTML5.

Funcionamiento

PixelMap. js es una pequeña biblioteca de manipulación de imágenes que le permite aplicar nuevos datos de píxel a la imagen original utilizando el lienzo de HTML5.

<div class="container-player">

<div id="mediaPlayer">



<div class="lds-ring" id=preload><div></div><div></div><div></div><div></div></div>



<video id='media-video' preload>





<source
src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4" type='video/mp4'>





<source src='parrots.webm' type='video/webm'>



</video>



<div id="controls">





<button id=play><i class="fas fa-pause"></i></button>





<button id=audioVolume class="fas fa-volume-off"></button>





<div id="progressBar">







<div id="progress"></div>





</div>





<div id="timer">







<span id="start"> 0 : 00</span>





</div>





<button id=expand><i class="fas fa-expand"></i></button>



</div>

</div>

<div id="playlist">


</div>
</div>

PixelMap. js es una pequeña biblioteca de manipulación de imágenes que le permite aplicar nuevos datos de píxel a la imagen original utilizando el lienzo de HTML5.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

PixelMap. js es una pequeña biblioteca de manipulación de imágenes que le permite aplicar nuevos datos de píxel a la imagen original utilizando el lienzo de HTML5.

<link rel="stylesheet" href="ocplayer.min.css">
<script src="ojcplayer.min.js"></script>

Especifique la información de vídeo (nombre, origen, duración, imagen de portada) en el video. JSON.

[

{



"id" : 0,



"name" : "Devstories from google",



"source" : "https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4",



"duration" : "4:34",



"img" : "https://lonelyplanetstatic.imgix.net/op-video-sync/images/production/p-5810396717001-brightcove-when-to-go-to-the-azores-20180726-050333.jpg?w=160&h=90&sharp=10&q=50"

},{


 "id" : 1,



"name" : "Vida marina - Oceano",



"source" : "http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4",



"duration" : "4:34",



"img" : "https://lonelyplanetstatic.imgix.net/op-video-sync/images/production/p-5810396717001-brightcove-when-to-go-to-the-azores-20180726-050333.jpg?w=160&h=90&sharp=10&q=50"


 },{



"id":2,



"name" : "Profundidades del oceano",



"source" : "http://thenewcode.com/assets/videos/ocean-small.mp4",



"duration" : "1:34",



"img" : "https://lonelyplanetstatic.imgix.net/op-video-sync/images/production/p-5810396717001-brightcove-when-to-go-to-the-azores-20180726-050333.jpg?w=160&h=90&sharp=10&q=50"

},{



"id": 3,



"name" : "Lo angeles timelapse",



"source" : "http://thenewcode.com/assets/videos/downtown-los-angeles.mp4",



"duration" : "3:34",



"img" : "https://lonelyplanetstatic.imgix.net/op-video-sync/images/production/p-5810396717001-brightcove-when-to-go-to-the-azores-20180726-050333.jpg?w=160&h=90&sharp=10&q=50"

},{



"id" : 4,



"name" : "Panasonic test video HD",



"source" : "http://mirrors.standaloneinstaller.com/video-sample/Panasonic_HDC_TM_700_P_50i.mp4",



"duration" : "2:34",



"img" : "https://lonelyplanetstatic.imgix.net/op-video-sync/images/production/p-5810396717001-brightcove-when-to-go-to-the-azores-20180726-050333.jpg?w=160&h=90&sharp=10&q=50"
}]