html中如何视频列表并播放,JavaScript实现html5视频播放器列表

本文将使用HTML5提供的 VideoAPI做一个自定义的视频列表播放器(重点放在视频的顺序播放，列表切换上，并不重新定义控制条)。

一、插入视频

如果不加上controls属性将不会显示控制条

二、HTML结构

播放列表

• 进球瞬间
• 胜利庆祝
• 进球瞬间
• 胜利庆祝
• 进球瞬间
• 胜利庆祝

<

>

三、js部分

1. 首先获取或定义一些需要用到的变量

var video = document.getElementById("video");

var lis = document.getElementsByTagName("li");

var vLen = lis.length; // 播放列表的长度

var url = [];

var ctrl = document.getElementById("playList-hidden");

var ctrl_show = document.getElementById('playList-show1');

var aside = document.getElementById("playList");

var curr = 1; // 当前播放的视频

for(var i=0;i

url[i] = lis