html5直播视频模板,HTML5 VideoAPI,打造自己的Web视频播放器
一、基础知识
1.用法video>
注意: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:返回音频/视频的播放是否已结束
更多属性、事件、方法请查看w3school
二、打造自己的播放器
我们使用JavaScript控制播放控件的行为(自定义播放控件),实现如下功能:
利用HTML+CSS制作一个自己的播放控件条,然后定位到视频最下方
视频加载loading效果
播放、暂停
总时长和当前播放时长显示
播放进度条
全屏显示
html5直播视频模板,HTML5 VideoAPI,打造自己的Web视频播放器相关推荐
- html5直播api,HTML5 VideoAPI,打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 注意:au ...
- web前端入门到实战:HTML5 VideoAPI,打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 <v ...
- python开发网页视频播放器_HTML5 VideoAPI,打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 注意:au ...
- web player html5源码,基于Flowplayer打造一款免费的WEB视频播放器附源码
Flowplayer 是一个开源(GPL 3的)WEB视频播放器.您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由定制和配置播放器相关参数以达到您要的播放效果.本文主要介绍Flowpla ...
- H5打造属于自己的视频播放器(JS篇1)
回顾 1)H5打造属于自己的视频播放器(HTML篇) 2)H5打造属于自己的视频播放器(逻辑篇) 前言 在HTML篇当中我们写好了样式,今天我们为video新增一个样式 .bad-video vide ...
- php网页播放器源码免费,基于Flowplayer打造一款免费的WEB视频播放器附源码
Flowplayer 是一个开源(GPL 3的)WEB视频播放器.您可以将该播放器嵌入您的网页中,如果您是开发人员,您还可以自由订制跟配置播放器相关参数以达到您要的播放疗效.本文主要介绍Flowpla ...
- html5直播源码,HTML5 直播疯狂点赞动画实现代码 附源码
直播有一个很重要的互动:点赞. 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯狂点赞 直播间的所有疯狂点赞,都需要在所有用户界面都动画展现出 ...
- html视频文件转换成视频,Amazing Video to HTML5 Converter(视频到HTML5转换器) V1.7.0 官方版...
Amazing Video to HTML5 Converter是一款专业出色的视频转HTML5格式工具,能够帮助用户轻松地将各种格式视频转换为HTML5,支持转换AVI,WMV,FLV,MOV,RM ...
- html5自适应 杂志模板,html5自适应,杂志模板.doc
html5自适应,杂志模板 篇一:20个优秀的响应式设计HTML5网站模板 20个优秀的响应式设计HTML5网站模板 想索取更多相关资料请加qq:649085085或登录 PS;本文档由北大青鸟广安门 ...
最新文章
- 014 怪物过滤的设计和实现
- ReentrantLock实现原理
- Hive合并小文件参数总结
- 数据结构之红黑树插入详解
- VassistX的简单介绍与下载安装
- 易语言取linux命令返回值,易语言返回命令使用讲解
- Deep Homography Estimation - Pytorch实现
- 回顾2022,展望2023,笔耕不辍,钟情翰墨
- php汉字存储容量大小,存储400个24*24点阵汉字字形所需的存储容量是多少
- LaTex粗略的学习笔记(表格)
- 基于R和ArcGIS两种方法制作土地利用转移图详细教程
- 华为手机怎么使用读卡器_华为手机怎么绑定门禁卡
- 深度学习各类性能指标含义解释
- 自动控制原理实验一——离散控制系统建模和仿真
- wordpress克隆站点_创建WordPress会员站点的终极指南
- 嵌入式数据库BERKELEY DB 之dubbo实战
- linux可以玩什么游戏_为什么我们要在Linux上玩游戏,与Icculus聊天等等
- VS2019 无法打开文件“kernel32.lib”
- Python之调用百度API实现手势识别
- 怎样无损放大图片?这几个方法不容错过