video.js
1.github地址
2.常用API:
class :
video-js: video-js应用视频所需的风格。js功能,比如全屏和字幕。
vjs-default-skin: vjs-default-skin默认皮肤适用于HTML控件,并且可以删除或覆盖创建自己的控制设计
data-setup 设置常用属性:
autoplay :是否自动播放
controls: 设置是否可以人为控制播放
preload:{ 设置预加载
auto: 立即加载(浏览器允许的情况下)
metadata:只加载视频的基本信息
none:不加载,直到用户点击播放的时候
}
poster:设置未播放时候的快照
loop:控制是否循环播放
width
height
JS形式:
videojs("example_video_1", {}, function(){
// Player (this) is initialized and ready.
});
videojs中设置data-setup的两种方式:
1.html:
<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>
2.js:
videojs("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });
track:
kind:定义字幕内容类型,只能是这五种之一: subtitles, captions, descriptions, chapters, metadata.
src:字幕文件的URL地址
srclang:字幕文件的语言类型,标识信息的作用,播放器不使用这个属性。
label:字幕标签,每个字幕元素必需设置一个唯一不重复的标签,切换字幕时显示的名称。
default:指定是否是默认字幕。如果每个都不指定,将不会自动显示字幕
例子:
<!DOCTYPE html>
<html>
<head>
<title>video.js</title> <link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body> <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="264"
poster="D:\CloudMusic\MV\jay.zhou.jpg" data-setup='{ "controls": true, "autoplay": true, "preload": "auto" }'>
<!--MP4的数据源-->
<source src="D:\CloudMusic\MV\jay.zhou.mp4" type='video/mp4'> <track kind="subtitles" label="Chinese subtitles" src="D:\CloudMusic\MV\st.vtt"
srclang="zh" label="Chinese"> </video> <script src="http://vjs.zencdn.net/5.8.8/video.js"></script> </body>
</html>
截图:
video.js的更多相关文章
- video.js播放mp4文件
HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...
- video.js使用教程API
videojs就提供了这样一套解决方案,他是一个兼容html5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持html5的浏览器下生成一个flash的版本. 最新的3. ...
- 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...
- 习课的视频播放器 video.js
jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...
- video.js html5 视频播放器
我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...
- wordpress使用video.js与七牛云存储实现无广告视频分享应用
video.js是一款极受欢迎的基于HTML5的开源WEB视频播放器,其充分利用了HTML5的视频支持特性,可以实现全平台的无视频插件播放功能,对于现在流行的手机.PAD等移动智能终端有极佳的应用体验 ...
- html5 video.js 使用及兼容所有浏览器
废话少说,直接开始 一.准备材料 video.js下载: http://www.videojs.com/ 二.代码 引入相关文件:(必须放在文件的开头,也是说一定要放在video标签之前) 贴入htm ...
- Video.js网页视频播放插件
插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器. ...
- video.js的使用
跨浏览器地播放视频,在网上找了一下,找到了video.js,记录一下video.js的简单用法. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2 ...
随机推荐
- 01.SQLServer性能优化之----强大的文件组----分盘存储
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 文章内容皆自己的理解,如有不足之处欢迎指正~谢谢 前天有学弟问逆天:“逆天,有没有一种方 ...
- 死磕内存篇 --- JAVA进程和linux内存间的大小关系
运行个JAVA 用sleep去hold住 package org.hjb.test; public class TestOnly { public static void main(String[] ...
- boosting、adaboost
1.boosting Boosting方法是一种用来提高弱分类算法准确度的方法,这种方法通过构造一个预测函数系列,然后以一定的方式将他们组合成一个预测函数.他是一种框架算法,主要是通过对样本集的操作获 ...
- Linux安装LAMP开发环境及配置文件管理
Linux主要分为两大系发行版,分别是RedHat和Debian,lamp环境的安装和配置也会有所不同,所以分别以CentOS 7.1和Ubuntu 14.04做为主机(L) Linux下安装软件,最 ...
- C++中的const
一,C++中const的基本知识 1.C++中const的基本概念 1.const是定义常量的关键字,表示只读,不可以修改. 2.const在定义常量的时候必须要初始化,否则报错,因为常量无法修改,只 ...
- nginx+iis+redis+Task.MainForm构建分布式架构 之 (redis存储分布式共享的session及共享session运作流程)
本次要分享的是利用windows+nginx+iis+redis+Task.MainForm组建分布式架构,上一篇分享文章制作是在windows上使用的nginx,一般正式发布的时候是在linux来配 ...
- 用游标实现查询当前服务器所有数据库所有表的SQL
declare @name varchar(100) DECLARE My_Cursor CURSOR --定义游标 FOR (SELECT Name FROM Master..SysDatabase ...
- 访问者模式(visitorpattern)
/** * 访问者模式 * @author TMAC-J * 在客户端和元素之间添加一个访问者 * 当你需要添加一些和元素关系不大的需求时,可以直接放在访问者里面 * 或者是元素之间有一些公共的代码块 ...
- ES6(块级作用域)
我们都知道在javascript里是没有块级作用域的,而ES6添加了块级作用域,块级作用域能带来什么好处呢?为什么会添加这个功能呢?那就得了解ES5没有块级作用域时出现了哪些问题. ES5在没有块级作 ...
- js闭包for循环总是只执行最后一个值得解决方法
<style> li{ list-style: none;width:40px;height: 40px;text-align:center;line-height: 40px;curso ...