html5实现视频列表js代码,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[i].getAttribute("value");
}
2.实现点击切换视频效果
//绑定单击事件
for(var i=0;i
lis[i].onclick = function(){
for(var j=0;j
if(lis[j] == this){
video.setAttribute("src",this.getAttribute("value")); //获取src路径
video.setAttribute('autoplay','autoplay');//自动播放
this.innerHTML = 'palying '+this.innerHTML;//点击后的列表显示
this.className = "select";//点击后的列表显示
curr = j+1;//定位下一播放位置
}else{
lis[j].innerHTML = lis[j].getAttribute("title");//没有点击的列表显示
lis[j].className = "";
}
}
}
}
3.顺序播放
video.setAttribute('src',url[0]);
lis[0].innerHTML = 'palying '+lis[0].innerHTML;
lis[0].className = "select";
video.addEventListener('ended', play);//添加侦听事件,视频播放完后调用play()方法
//play();
function play() {
video.src = url[curr];
video.load();
video.play();
for(var j=0;j
if(j == curr){
video.setAttribute("src",lis[j].getAttribute("value"));
video.setAttribute('autoplay','autoplay');
lis[j].innerHTML = 'palying '+lis[j].innerHTML;
lis[j].className = "select";
}else{
lis[j].innerHTML = lis[j].getAttribute("title");
lis[j].className = "";
}
}
curr++;
if (curr >= vLen) curr = 0; // 播放完了,重新播放
}
4.收起或展示播放列表
//收起播放列表
ctrl.onclick = function(){
aside.style.transition = "1s";
aside.style.transform = "translateX(-10vw)";
setTimeout(function(){
aside.style.display = "none";
ctrl_show.style.visibility= 'visible';
},"1000");
}
//展开播放列表
ctrl_show.onclick = function(){
aside.style.display = "block";
ctrl_show.style.visibility= 'hidden';
setTimeout(function(){
aside.style.transform = "translateX(0vw)";
},"0");
}
5.demo目录结构
四.小结
本案列体现功能,所以界面不美观且css部分不加以展现。
第一次发表手计,许多地方可能有纰漏。还请见谅。
源码下载链接:http://pan.baidu.com/s/1gfpbvpD
最后运行效果图
打开App,阅读手记
html5实现视频列表js代码,JavaScript实现html5视频播放器列表相关推荐
- html5 网页视频水印 | js代码实现示例
示例图 原理 通过html的页面布局,在video播放器层面,通过js控制dom,插入文本水印代码. 代码示例 index.html <!DOCTYPE html> <html> ...
- 视频教程-2020全新Javascript基础面试视频前端js教程-JavaScript
2020全新Javascript基础面试视频前端js教程 7年的开发架构经验,曾就职于国内一线互联网公司,开发工程师,现在是某创业公司技术负责人, 擅长语言有node/java/python,专注于服 ...
- 基于web的视频_如何创建基于Web的视频播放器
在上一篇文章中,我们介绍了有关如何创建Audio Web Player以及如何自定义其播放器外观的教程. 这次我们将用视频来做. 是的,我们将创建一个Web Video Player. 视频播放器将使 ...
- b站bilibili哔哩哔哩动画视频加速18倍速js代码JavaScript最新2023年
b站视频加速18倍 js代码最新 这里是加速10倍 let container = document.querySelectorAll("#app>.video-container-v ...
- [转载]用UglifyJS2合并压缩混淆JS代码——javascript系列
从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...
- 优酷播放的html代码,在网页里面嵌入播放优酷视频的js代码
先上代码,然后再讲解一下代码为啥是这样写的: 以上是html部分: js部分代码: function start_play(){ $.getScript('http://player.youku.co ...
- 引用腾讯视频 php代码,调用腾讯视频播放器APi代码
调用腾讯视频播放器APi代码 发布时间:2018-05-18 00:10, 浏览次数:685 , 标签: APi 转自:https://blog.csdn.net/boyit0/article/det ...
- android 视频播放器-列表播放器
github地址 HeartVideo HeartVideo是通过封装Mediaplayer+TextureView的视频播放器,封装此库的初衷是因为开发过程中简单的应用却要加载第三方过大的库增加了包 ...
- 在Qt中如何用纯代码写一个本地视频播放器
一.首先用纯代码写本地视频播放器需要用到以下类 #include <QWidget> #include <QHBoxLayout> //水平布局 #include <QV ...
最新文章
- 剑指offer:面试题31. 栈的压入、弹出序列
- textureview 旋转90度后平铺_轮滑知识 | 单排轮滑的旋转技巧
- 解决大众点评换设备无法用卷(你本次购买不符合活动规则)的问题
- SQL中int类型与varchar类型的隐式转换
- BackTrack 5 发布了 ---直接下载地址
- Python解释器和IPython
- 架构师2月刊发布:解读Android、高效运维、API设计方法论
- bzoj3195 [Jxoi2012]奇怪的道路
- join和子查询效率_SparkSQL连接查询中的谓词下推处理(上)
- MPLS连通性测试原理
- java中Field中的方法,解析Java中的Field类和Method类
- 百度经纬度转GPS经纬度
- 强化学习入门1—多臂老虎机Multi-armed Bandits
- 上周四的复盘 | 市场回暖了?割肉吗?
- 关于srand函数的疑问
- python中sticky_vue-sticky组件详解
- 39岁了,我依然要谈梦想
- css箭头图片方向转换
- mysql密码强度不够怎么解决_安装ISPConfig 遇到的mysql密码强度问题
- Linux之IFS间隔符、C编程、gdb调试
热门文章
- 7个向设计师提需求的正确方法
- 最近给偶的小鼻子做手术了,现在还没好利落
- Aspose工具实现word和ppt转pdf功能及遇到的一些问题
- 创业中的一些经验分享(1)——创业杂谈
- 三体模拟器(python)
- idea破解 2018.2.3
- 讯飞语音合成 发音不准确怎么解决
- nrf51822学习之BLE400与青风开发板调试RADIO模块
- 图解python pdf_Python批量将ppt转换为pdf的简单示例
- Java 创建简单的WebService (转载自http://wl-ldy.iteye.com/blog/1055428)