h5 视频播放功能实现

简单制作一个h5 的视频播放

结构 html 部分

 <div id="cans"><video controls="controls" id="video" 　src="" height="500px" width="500px"></video><aside id="playList"><!-- <header><h4>播放列表</h4></header> --><ul class="list"><li value=" " title="01第一讲">01第一讲</li><li value="" title="02第二讲">02第二讲</li><li value=" " title="03第三讲">03第三讲</li><li value="" title="04第四讲">04第四讲</li><li value="" title="05第五讲">05第五讲</li></ul><button title="收起播放列表" id="playList-hidden">< </button></aside><button title="展开播放列表" id="playList-show1"> > </button></div>

<script>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 < lis.length; i++) {url[i] = lis[i].getAttribute("value");}for (var i = 0; i < lis.length; i++) {lis[i].onclick = function () {for (var j = 0; j < lis.length; j++) {if (lis[j] == this) {video.setAttribute("src", this.getAttribute("value")); //获取src路径video.setAttribute('autoplay', 'autoplay');//自动播放this.innerHTML = '正在播放 ' + this.innerHTML;//点击后的列表显示this.className = "select";//点击后的列表显示curr = j + 1;//定位下一播放位置} else {lis[j].innerHTML = lis[j].getAttribute("title");//没有点击的列表显示lis[j].className = "";}}}}video.setAttribute('src', url[0]);lis[0].innerHTML = '正在播放 ' + 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 < lis.length; 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; // 播放完了，重新播放}//收起播放列表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");}
</script>

基本功能我们就已经实现了，其他根据需求来实现！简单修改即可使用！

h5 视频播放功能实现相关推荐

uni app 视频播放功能
视频播放功能,需求:编译成纯h5网页,运行在任意容器里,如浏览器.安卓原生和iOS等媒体组件video 首先使用video组件,然后高度需要自己设置 uni.createVideoContext 官 ...
ionic中的在线视频播放功能
前言在ionic中处理视频播放的功能在stackoverflow, ionic-forum以及ionic的github issue中都有提及,有很多相关讨论, 我们只针对在线视频播放功能进行下总结, ...
简单的 H5 视频推流解决方案
简单的 H5 视频推流解决方案参考文章: (1)简单的 H5 视频推流解决方案 (2)https://www.cnblogs.com/lidabo/p/7099633.html 备忘一下.
【腾讯Bugly干货分享】H5 视频直播那些事
为什么80%的码农都做不了架构师?>>> 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6 ...
Java实现视频网站的视频上传、视频转码、视频关键帧抽图, 及视频播放功能
最近有个项目牵扯到上传视频,简直把我搞炸了.还么搞定,主要是当初设计有点小出入,心里一直不是坚持,所以,哎,还得努力撒! 下面是当时参考,睡觉,明天搞哎.http://www.cnblogs.com/ ...
android实现水平进度条_Flutter在线视频播放功能实现（chewie库）
前言: 实现在一个在线视频播放功能,使用第三方库Chewie. 实现步骤: 1.新建一个flutter项目. 2.获取Chewie插件. 3.添加播放视频所需要的权限. 4.调试代码实现你想要的效果. ...
智能会议系统（10）---WebRtc在H5视频聊天
基于WebRtc在H5视频聊天.视频教学.视频会议.视频直播.白板互动低延时方案随移动互联应用加快,4G,5G网络上马,低延时网络视频应改越来越走近生活,在教学,会议,在线医疗,招聘交友及时视频要求 ...
神奇的H5视频画中画功能
一个H5视频,可以从浏览器独立出来播放视频,看起来像是一个本地应用.画中画功能是chrome70+的新功能官方例子,Github地址 <video id="video" s ...
h5 视频活体检测（人脸认证）的前端
调百度云h5视频活体检测接口,功能是在H5场景下,通过用户新录制并上传一个视频,来进行活体检测的判断. 兼容性比较好的做法是通过input去打开手机系统原生的录像界面 <input type=& ...

h5 视频播放功能实现

h5 视频播放功能实现相关推荐

最新文章

热门文章