Video.js的简单使用介绍
2019独角兽企业重金招聘Python工程师标准>>>
vedio.js 是一款视频播放插件,它会自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。下面来介绍下它的使用:
引用video-js.cs样式文件和video.js
<link href="video-js.css" rel="stylesheet" type="text/css"> <script src="video.js"></script>
设置flash播放器的路径,如果你的浏览器不支持html5,将会使用flash播放
<script>videojs.options.flash.swf = "video-js.swf"; </script>
body部分,这里支持三种格式MP4,webm,ogg,也可以设置网络路径,poster:视频的封面图片
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="800"poster="http://video-js.zencoder.com/oceans-clip.png"data-setup="{}"><source src="wangmaohuijieshao.mp4" type='video/mp4' /><!--<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /><source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />--><track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --><track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --> </video>
自动播放:
<script type="text/javascript">var myPlayer = videojs('example_video_1');videojs("example_video_1").ready(function () {var myPlayer = this;myPlayer.play();}); </script>
默认情况下,大的播放按钮是被定在左上角的,这样就不会覆盖视频内容。如果你想让这个播放按钮剧中,你可以给你的video标签添加额外的vjs-big-play-center样式,比如:
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-center" controls preload="auto" width="1280" height="800"data-setup="{}">
如果需要改变成为自己喜欢的播放按钮,可以这样定义样式
.video-js .vjs-big-play-button { /* 重写播放按钮的样式 */ }
一些参数:
var myPlayer = videojs(“example_video_1″);//获取对象,example_video_1就是video标签的id值 myPlayer.play();//播放 myPlayer.pause();//暂停 var whereYouAt = myPlayer.currentTime();//获取播放进度: myPlayer.currentTime(120);//设置播放进度: var howLongIsThis = myPlayer.duration();//视频持续时间,加载完成视频才可以知道视频时长,且在flash情况下无效 var whatHasBeenBuffered = myPlayer.buffered();//缓冲,就是返回下载了多少 var howMuchIsDownloaded = myPlayer.bufferedPercent();//百分比的缓冲 var howLoudIsIt = myPlayer.volume();//获取声音大小 myPlayer.volume(0.5);//设置声音大小(0-1之间) var howWideIsIt = myPlayer.width();//取得视频的宽度 myPlayer.width(640);//设置宽度 var howTallIsIt = myPlayer.height();//获取高度 myPlayer.height(480);//设置高度: myPlayer.size(640,480);//一步到位的设置大小: myPlayer.enterFullScreen();//全屏//自定义事件 var myFunc = function(){ // Do something when the event is fired }; //添加事件 myPlayer.addEvent(“eventName”, myFunc); //删除事件 myPlayer.removeEvent(“eventName”, myFunc); //事件绑定 myPlayer.on("ended", function(){console.log("end", this.currentTime()); });事件类型: durationchange ended //播放结束 firstplay fullscreenchange loadedalldata loadeddata loadedmetadata loadstart pause //暂停 play //播放 progress seeked seeking timeupdate volumechange waiting resize inherited
转载于:https://my.oschina.net/u/3666693/blog/1819404
Video.js的简单使用介绍相关推荐
- 用js代码简单的介绍自己
在JavaScript中使用prototype扩展对象属性和方法 JavaScript是基于对象的程序开发语言,在JavaScript中可以创建对象和函数,但创建好的对象有时也需要prototype对 ...
- Video.js简单使用
今天项目中需要跨浏览器地播放视频,在网上找了一下,找到了video.js,记录一下video.js的简单用法. <html> <head> ... <!-- 引入vide ...
- 免费视频播放器Video.js介绍
原文地址:http://www.cnblogs.com/afrog/p/6689179.html Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.j ...
- 开源视频播放器Video.js介绍
原文地址:http://www.cnblogs.com/afrog/p/4115377.html 最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上 ...
- js-视频播放插件Video.js简单使用
插件下载地址: http://www.jq22.com/jquery-info404 Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 ...
- HTML5视频播放插件 video.js介绍
本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=kjab&title=HTML5%E8%A7%86%E9%A2%91%E6%92%AD ...
- html5 video js控制摄像头的焦距,html 通过input video canvas 打开摄像头 定制相机
在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来.页面布局很简单,就是一个input标签,两个HTML5元素video.canvas和一个but ...
- html5 video.js 使用及兼容所有浏览器
http://www.itnose.net/detail/6076396.html 一.准备材料 video.js下载: http://www.videojs.com/ 二.代码 引入相关文件: 贴入 ...
- Video.js插件切换视频源并操作m3u8格式视频
目录 第一章 videojs的配置与简介 第二章 更改视频源代码与实例 第三章 api的部分应用实例 第四章 视频api补充介绍 添加事件 事件绑定 前言:老师让我修改一个需要播放器的界面,之前的播放 ...
最新文章
- java封装对象实体类_Java 接口自动化系列--实体类之entity封装
- RocketMQ NameServer启动要初始化哪些参数
- UNIX中的文件控制--fcntl()
- 基于Pytorch再次解析AlexNet现代卷积神经网络
- Windows下的命令神器Cmder
- Python学习心得——基础知识(六)
- NYOJ 240 小明的调查统计(二)
- ROS初学笔记 - C++11与PCL库冲突问题
- codebrag审核代码工具安装配置
- 误删了计算机桌面回收站,我电脑回收站里的东西已经被删除几天了?怎么可以找回!谢谢...
- 棋盘问题(信息学奥赛一本通-T1217)
- Linux之防火墙开通端口
- 小猫钓鱼——栈和队列的应用(C++)
- python停止程序_如何停止python程序
- 华为OD机考:0025-0028:黑板报数字涂色-十进制数字最低位排序-最大n个数和最小n个数之和
- vue flv.js实时播放监控视频 .flv 格式
- 白开水最耐喝,最解内心的渴
- xyplorer设置备忘
- 学生结构体,学生有姓名 学号 三门成绩 班级人数为五人 。实现 1:第一门成绩的平均分;2:找出两门以上不及格的学生,输出他们的姓名学号及三门成绩; 3:找出平均分在90分以上或者全部成绩在85分以上
- Java买飞机票代码
热门文章
- 玩转基因组浏览器之查看MAF文件
- 让 Odoo POS 支持廉价小票打印机
- java 图形_java 画立体图形
- nodejs使用Moment.js操作日期时间
- 我们为什么要使用空接口
- 使用ASCII转换大小写
- hostapd配置解析
- linux文件如何通过vmtools共享到windows,使用vmtools来设置windows和linux的共享文件夹...
- java算术运算符乘方_用java编写计算器 能够实现简单的加、减、乘、除、乘方、开方运算等;...
- 年薪50万开发者相亲失败:程序员,别输在不会说话上