html5直播api,HTML5 VideoAPI,打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAPI的扩展。
一、基础知识
1.用法
注意:audio和video元素必须同时包含开始和结束标签,不能使用这样的空元素语法形式。
2.重要HTML属性
controls:ontrol:如果出现该属性,则向用户显示控件,比如播放按钮。每个浏览器中的播放控件都不太一样,但用途都一样,都可以控制开始和结束,跳到新位置和调节音量
autoplay:autoplay:如果出现该属性,则视频在就绪后马上播放。如果不设置autoplay属性,必须是用户单击播放按钮才会播放音频文件。
loop:loop:(循环播放)告诉浏览器在音频到达末尾时,再从头开始重新播放
preload:auto、mete、none:告诉浏览器如何下载音频
auto:让浏览器下载整个文件,以便用户单击播放按钮时就能播放。当然,下载过程是后台进行的,网页访客不必等待下载完成,而且仍然可以随意查看网页。
meta:告诉浏览器先获取音频文件开头的数据块,从而足以确定一些基本信息(比如音频的总时长)
none:**告诉浏览器不必预先下载。恰当地利用这些值,可以节省带宽。
如果没有设置preload属性,浏览器就自己决定是否预先下载了。对这一点,不同浏览器的处理方式也不一样。多数浏览器将auto作为默认值,但Firefox的默认值是metadata。不过,也请大家注意,这个preload属性也不是必须严格执行的规则,而只是你对浏览器的建议。根据具体情况,浏览器可以忽略你的设置。(有些旧版本浏览器根据不会在意preload属性。)
3.常用事件
事件名称:解释
oncanplay:当文件就绪可以开始播放时运行的脚本(缓冲已足够开始时)。
ontimeupdate:当播放位置改变时(比如当用户快进到媒介中一个不同的位置时)运行的脚本。
onended:当媒介已到达结尾时运行的脚本(可发送类似“感谢观看”之类的消息)。
4.常用方法
方法名称:解释
play():开始播放音频/视频
pause():暂停当前播放的音频/视频
5.常用API属性
属性名称:解释
duration:返回当前音频/视频的长度(以秒计)
paused:设置或返回音频/视频是否暂停
currentTime:设置或返回音频/视频中的当前播放位置(以秒计)
ended:返回音频/视频的播放是否已结束
二、打造自己的播放器
我们使用JavaScript控制播放控件的行为(自定义播放控件),实现如下功能:
利用HTML+CSS制作一个自己的播放控件条,然后定位到视频最下方
视频加载loading效果
播放、暂停
总时长和当前播放时长显示
播放进度条
全屏显示
1.播放控件
00:00:00 /
00:00:00
上面是全部HTML代码,.controls类就是播放控件HTML,引用CSS代码:
为了显示播放按钮等图标我使用了字体图标
2.视频加载loading效果
一开始先隐藏视频,用一个背景图片替代,等到视频加载完成可以播放时在显示视频
CSS:
.player {
width: 720px;
height: 360px;
margin: 0 auto;
background: #000 url(../images/loading.gif) center/300px no-repeat;
position: relative;
}
video {
display: none;
height: 100%;
margin: 0 auto;
}
3.播放功能
让我们开始写javascript代码吧,首先我们先获取要用到的DOM元素:
var video = document.querySelector("video");
var isPlay = document.querySelector(".switch");
var expand = document.querySelector(".expand");
var progress = document.querySelector(".progress");
var loaded = document.querySelector(".progress > .loaded");
var currPlayTime = document.querySelector(".timer > .current");
var totalTime = document.querySelector(".timer > .total");
当视频可以播放时,显示视频
//当视频可播放的时候
video.oncanplay = function(){
//显示视频
this.style.display = "block";
//显示视频总时长
totalTime.innerHTML = getFormatTime(this.duration);
};
4.播放、暂停
点击播放按钮时显示暂停图标,在播放和暂停状态之间切换图标
//播放按钮控制
isPlay.onclick = function(){
if(video.paused) {
video.play();
} else {
video.pause();
}
this.classList.toggle("fa-pause");
};
5.总时长和当前播放时长显示
前面代码中其实已经设置了相关代码,此时我们只需要把获取到的毫秒数转换成我们需要的时间格式即可,提供getFormatTime()函数:
function getFormatTime(time) {
var time = time 0;
var h = parseInt(time/3600),
m = parseInt(time%3600/60),
s = parseInt(time%60);
h = h < 10 ? "0"+h : h;
m = m < 10 ? "0"+m : m;
s = s < 10 ? "0"+s : s;
return h+":"+m+":"+s;
}
6.播放进度条
//播放进度
video.ontimeupdate = function(){
var currTime = this.currentTime, //当前播放时间
duration = this.duration; // 视频总时长
//百分比
var pre = currTime / duration * 100 + "%";
//显示进度条
loaded.style.width = pre;
//显示当前播放进度时间
currPlayTime.innerHTML = getFormatTime(currTime);
};
这样就可以实时显示进度条了,此时,我们还需要点击进度条进行跳跃播放,即我们点击任意时间点视频跳转到当前时间点播放:
//跳跃播放
progress.onclick = function(e){
var event = e window.event;
video.currentTime = (event.offsetX / this.offsetWidth) * video.duration;
};
7.全屏显示
这个功能可以使用HTML5提供的全局API:webkitRequestFullScreen实现,跟video无关:
//全屏
expand.onclick = function(){
video.webkitRequestFullScreen();
};
经测试在firefox、IE下全屏功能不可用,这样正常了,全屏API是针对webkit内核的。
html5直播api,HTML5 VideoAPI,打造自己的Web视频播放器相关推荐
- web前端入门到实战:HTML5 VideoAPI,打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 <v ...
- python开发网页视频播放器_HTML5 VideoAPI,打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 注意:au ...
- html5直播视频模板,HTML5 VideoAPI,打造自己的Web视频播放器
一.基础知识 1.用法video> 注意:audio和video元素必须同时包含开始和结束标签,不能使用 2.重要HTML属性 controls:ontrol:如果出现该属性,则向用户显示控件, ...
- html5在线api,HTML5 历史记录API
HTML5 历史记录API HTML5历史记录API的使用方法,在线实例演示HTML5历史记录API如何使用.浏览器的兼容性.语法定义及它的属性值详细资料等. HTML5历史记录API使您可以通过Ja ...
- H5打造属于自己的视频播放器(JS篇1)
回顾 1)H5打造属于自己的视频播放器(HTML篇) 2)H5打造属于自己的视频播放器(逻辑篇) 前言 在HTML篇当中我们写好了样式,今天我们为video新增一个样式 .bad-video vide ...
- NDK学习笔记(十二) 原生图形api,使用AVILib创建一个AVI视频播放器
文章目录 1.练练手,使用AVILib创建一个AVI视频播放器 (1)首先下载transcode,并配置avilib. (2)创建AbstractPlayerActivity并实现native方法 ( ...
- html5 打印api,HTML5的API(一)
API,简单来讲就是接口. DOM是html给js的接口,BOM是浏览器给html的接口. 列举下HTML5中的API: 1.canvas(具体内容见:https://my.oschina.net/u ...
- html5之api,HTML5之API(示例代码)
HTML5就是牛,可以直接播放音视频,还可以作图: 一.HTML5中播放视频和音频: 加载时直接播放音频的方式:new Audio("BY2.mp3").play(); 播放器 视 ...
- html5 地理api,HTML5地理定位-Geolocation API
HTML5提供了一组Geolocation API,来自navigator定位对象的子对象,获取用户的地理位置信息 Geolocation API使用方法: 1.判断是否支持 navigator.ge ...
最新文章
- 小米云能同步到华为手机上吗_有没有小米还没涉足的产业?对标百度网盘,小米云盘即将上线...
- 搭建Python+Django开发环境
- simulink里面pid模块N的参数什么意思?
- 三分钟了解 Python3 的异步 Web 框架 FastAPI
- django自定义用户表
- 计算机插件技术应用原理,计算机软件技术中插件技术的运用
- 快速用 Haskell 构建超级简单的 Web 技术栈!
- linux使用windows中编辑的文件,格式问题
- BootStrap:基础学习
- 如何在CentOS 7上安装和安全配置MariaDB 10
- 前端React实现pdf在线阅读和电子合同
- ie11 java提示升级,解决IE11安装升级失败和在安装前需要更新的问题
- 哔哩哔哩服务器在哪个文件夹,哔哩哔哩在手机哪个文件夹
- 开发转测试? Yes or No
- 【Flutter】Dart 数据类型 布尔类型 ( 布尔类型定义 | 逻辑运算 )
- 〖Python自动化办公篇⑤〗- 文件自动化管理 - 清理重复的文件与批量修改文件名
- C#中(int)、Conver.Toint32()、int.Parse()三种类型转换方式的区别与联系--C#基础知识
- 游戏ui设计,游戏ui设计需要学什么
- RO,RW,ZI概念
- 让模态浮出水面的S2 刘易斯逻辑之八
热门文章
- lucene: 索引建立完后无法查看索引文件中的数据
- Application_Error
- oracle 时间函数
- win7下安装usb转串口不成功解决方法
- Shell学习:关于替换命令-tr-ROT13法则
- 幼儿园带括号算式口诀_幼教必备:幼儿园17首数学儿歌收藏!
- java的设计模式你了解多少?
- mysql 当前用户连接数,查看mysql当前连接数的方法详解
- c++ enum 给定类型_C++ 枚举类型详解
- nginx proxy_pass 使用变量报错_nginx自定义变量与内置预定义变量