html视频直播源码,用HTML5开发简单的视频播放器,附源码
我们采用 Bootstrap 网站的图标字体,作为播放器的按钮图标。
index.html的代码如下:
*{
margin: 0;
padding: 0;
}
/*多媒体标题*/
figcaption{
text-align: center;
line-height: 150px;
font-family: "Microsoft Yahei";
font-size:24px;
}
/* 播放器*/
.palyer{
width: 720px;
height: 360px;
margin:10px auto;
border: 1px solid #000;
background: url(images/loading.gif) center no-repeat #000;
background-size:auto 100%;
position: relative;
border-radius: 20px;
}
.palyer video{
height:100%;
display: block;
margin:0 auto;
/*display: none;*/
}
/* 控制条*/
.controls{
width: 700px;
height:40px;
background-color: rgba(255, 255, 0, 0.3);
position: absolute;
bottom:10px;
left:10px;
border-radius: 10px;
}
/*开关*/
.switch{
position: absolute;
width: 20px;
height: 20px;
left:10px;
top:10px;
text-align: center;
line-height: 20px;
color:yellow;
}
/*进度条*/
.progress{
width: 432px;
height: 10px;
position: absolute;
background-color: rgba(255,255,255,0.4);
left:40px;
top:15px;
border-radius: 4px;
overflow: hidden;
}
/* 当前进度*/
.curr-progress{
width: 50%;
height: 10px;
background-color: #fff;
}
/* 时间模块*/
.time{
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
color:#fff;
position: absolute;
left:510px;
top:10px;
font-size:12px;
}
/*全屏*/
.extend{
position: absolute;
width: 20px;
height: 20px;
right:20px;
top:10px;
text-align: center;
line-height: 20px;
color:yellow;
}
00:00:00/00:00:00
// 思路:
/*
* 1、点击按钮 实现播放暂停并且切换图标
* 2、算出视频的总时显示出出来
* 3、当视频播放的时候,进度条同步,当前时间同步
* 4、点击实现全屏
*/
// 获取需要的标签
var video=document.querySelector('video');
// 播放按钮
var playBtn=document.querySelector('.switch');
// 当前进度条
var currProgress=document.querySelector('.curr-progress');
// 当前时间
var currTime=document.querySelector('.curr-time');
// 总时间
var totalTime=document.querySelector('.total-time');
// 全屏
var extend=document.querySelector('.extend');
var tTime=0;
// 1、点击按钮 实现播放暂停并且切换图标
playBtn.οnclick=function(){
// 如果视频播放 就暂停,如果暂停 就播放
if(video.paused){
// 播放
video.play();
//切换图标
this.classList.remove('icon-play');
this.classList.add('icon-pause');
}else{
// 暂停
video.pause();
// 切换图标
this.classList.remove('icon-pause');
this.classList.add('icon-play');}
}
// 2、算出视频的总时显示出出来
// 当时加载完成后的事件,视频能播放的时候
video.οncanplay=function(){
// 获取视频总时长
tTime=video.duration;
console.log(tTime);
// 将总秒数 转换成 时分秒的格式:00:00:00
// 小时
var h=Math.floor(tTime/3600);
// 分钟
var m=Math.floor(tTime%3600/60);
// 秒
var s=Math.floor(tTime%60);
// console.log(h);
// console.log(m);
// console.log(s);
// 把数据格式转成 00:00:00
h=h>=10?h:"0"+h;
m=m>=10?m:"0"+m;
s=s>=10?s:"0"+s;
console.log(h);
console.log(m);
console.log(s);
// 显示出来
totalTime.innerHTML=h+":"+m+":"+s;
}
// * 3、当视频播放的时候,进度条同步,当前时间同步
// 当时当前时间更新的时候触发
video.οntimeupdate=function(){
// 获取视频当前播放的时间
// console.log(video.currentTime);
// 当前播放时间
var cTime=video.currentTime;
// 把格式转成00:00:00
var h=Math.floor(cTime/3600);
// 分钟
var m=Math.floor(cTime%3600/60);
// 秒
var s=Math.floor(cTime%60);
// 把数据格式转成 00:00:00
h=h>=10?h:"0"+h;
m=m>=10?m:"0"+m;
s=s>=10?s:"0"+s;
// 显示出当前时间
currTime.innerHTML=h+":"+m+":"+s;
// 改变进度条的宽度: 当前时间/总时间
var value=cTime/tTime;
currProgress.style.width=value*100+"%";
}
// 全屏
extend.οnclick=function(){
// 全屏的h5代码
video.webkitRequestFullScreen();
}
html视频直播源码,用HTML5开发简单的视频播放器,附源码相关推荐
- python跑酷游戏源码_Phaser.js实现简单的跑酷游戏附源码下载
采用的物理引擎是Phaser.js 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 ...
- web player html5源码,基于Flowplayer打造一款免费的WEB视频播放器附源码
Flowplayer 是一个开源(GPL 3的)WEB视频播放器.您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由定制和配置播放器相关参数以达到您要的播放效果.本文主要介绍Flowpla ...
- php网页播放器源码免费,基于Flowplayer打造一款免费的WEB视频播放器附源码
Flowplayer 是一个开源(GPL 3的)WEB视频播放器.您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由订制跟配置播放器相关参数以达到您要的播放疗效.本文主要介绍Flowpla ...
- Android 开发简单记事本程序(附源码)
简单介绍一下功能:简单记事本只能添加文字内容,首页用ListView显示所有保存的事项和保存的时间,添加页面添加内容,点击首页的ListView可以查看内容,删除内容. 先看一下运行效果: 先建立数据 ...
- 【百套源码】HTML5期末大作业 - 各类网页作业源码合集
文章目录 持续更新文章记录 1️⃣ 个人介绍类相关源码 1.1 html实现个人简历 1.2 科技风个人简历 1.3 网站风个人简历 1.4 多种风格个人主页模板 1.5 html好看的个人简历明星版 ...
- 【Linux后台开发系列】Nginx源码从模块开发开始,不再对nginx源码陌生丨源码分析
Nginx源码从模块开发开始,不再对nginx源码发怵,值得学习,认真听完. 1. nginx的conf配置,cmd解析 2. nginx模块的八股文 3. nginx开发的细枝末节 [Linu ...
- 用ionic快速开发hybird App(已附源码,在下面+总结见解)
用ionic快速开发hybird App(已附源码,在下面+总结见解) 1.ionic简介 ionic 是用于敏捷开发APP的解决方案.核心思路是:利用成熟的前端开发技术,来写UI和业务逻辑.也就是说 ...
- arcgis开发 多版本之间如何兼容_arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)...
你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...
- 多人私密视频直播会议聊天室系统开发
多人视频直播会议聊天室系统开发 轻便小巧无须安装 绑定公号无须登录 界面简洁操作方便 权限管理避免白嫖 前端/ 会议设置 用户可以设置姓名 管理员可以修改会议主题和分享说明文字 多人视频 左上显示用户 ...
- 用于校园流浪猫信息记录和分享的小程序源码/微信云开发中大猫谱小程序源码
用于校园流浪猫信息记录和分享的小程序源码/微信云开发中大猫谱小程序源码 ☑️ 编号:ym478 ☑️ 品牌:无 ☑️ 语言:微信小程序 ☑️ 大小:6.5MB ☑️ 类型:校园流浪猫信息记录和分享 ☑ ...
最新文章
- 购物商城Web开发第十二天
- datatables使用指南
- sendmail启动报错
- 换晶振导致stm32串口数据飞码的解决办法(补充)
- 分布式机器学习框架:MxNet 前言
- 编程大讲坛、坛坛是佳酿--编程大讲坛:Visual Basic核心开发技术从入门到精通...
- uniapp 如何配置MySQL_uniapp后台api设计(微信user表)
- 2022电力电缆复训题库及在线模拟考试
- 3t中文 studio_studio 3t免费版
- 解析函数的孤立奇点-复变函数
- windows和linux双系统
- 用python中的turtle库绘制一些有趣的图
- spring jsm(二)
- 为什么JS的语法很乱
- Qt的跨平台的部分原理和机制
- 前端面试常见面试题及答案
- CorelDRAW X7入门到精通视频教程 广告 名片 相册 包装设计
- oracle11g数据库导入导出
- 【比特大数据】第一辑:手机信令大数据格式及应用价值
- yep放假第一周来交作业嘻嘻
热门文章
- ubuntu9.10之grub.cfg详解
- [软件应用]官方下载Nero-9.4.13.2d_update.exe迅雷竟也报毒
- python在线翻译小程序_Python 做一个翻译小程序
- node 连接mysql 中间件_如何在node.js里连接和使用mysql
- WINDOWS剪切板内容 复制到vi编辑器使用
- c++多线程中detach的使用隐患
- Linux socket程序演示
- c++动态联编与静态联编
- SQL教程数据库视频数据分析教程Sql Server|MySQL|Oracle视频教程
- web安全之信息收集