JWPlayer高速入门指南(中文)
将JW Player嵌入到网页中很的简单,仅仅须要进行例如以下3个步骤:
1、解压mediaplayer-viral.zip文件。将jwplayer.js和player.swf文件复制到project中;
2、在页面引入jwplayer.js文件:
<script type="text/javascript"
src="/jwplayer/jwplayer.js"></script>
3、将以下代码粘贴在body标签内。例如以下所看到的:
<div id="container">Loading the player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer:
"/jwplayer/player.swf",
file:
"/uploads/video.mp4",
height:
,
width:
});
</script>
上面代码的含义不言自明,上面script中的flashplayer仅仅只是是JWPlayer众多配置中的一个,上面样例使用了div标签。以下给出使用video标签:
<video
src="/videos/video.mp4"
height="270"
id="container"
poster="/thumbs/image.jpg"
width="480">
</video>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer:
"/jwplayer/player.swf"
});
</script>
在这样的情况下,JW Player使用video标签及其属性载入配置选项。
高速嵌入
将jwplayer.js和player.swf复制到jwplayer目录,你能够通过以下两行简单的代码将JW Player嵌入到HTML网页中,代码例如以下:
<script type="text/javascript"
src="/jwplayer/jwplayer.js"></script>
<video class="jwplayer"
src="/uploads/video.mp4"poster="/uploads/image.jpg"></video>
页面中class属性值为jwplayer的全部video标签将更换为JW Player。
JWPlayer语法
语法基本结构:
jwplayer(container).setup({options});
“container”是载入JW Player的DOM元素,比如video、div、p等等,假设是video标签。标签的属性(比方width和src))将被载入到JW Player中。“options”是JW Player配置选项列表,配置选项的指南包括完整的概述,比方以下的样例:
<div id="container">Loadingthe player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
autostart:
true,
controlbar:
"none",
file:
"/videos/video.mp4",
duration:
,
flashplayer:
"/jwplayer/player.swf",
volume:
,
width:
});
</script>
“options”的选项并不仅限于此,它还有例如以下选项:
skin:设置JW Player皮肤;
playlist: 设置JW Player播放列表;
levels:通过设置比特率来设定不同视频的播放质量等级。
plugins:设置JW Player插件,包含它们的配置选项;
events: 给JW Player加入事件,营造运行js脚本的环境。
modes:指定为了渲染播放器JW Player 所使用的不同浏览器技术的顺序;
接下来具体介绍这些选项:
skin
JW Player有各种各样的可用来改动播放器外观和感觉的皮肤。为了嵌入JWPlayer 5的皮肤,仅仅需将压缩文件复制到Webserver上并使用skin选项指定皮肤压缩文件路径就可以。代码例如以下:
<div id="container">Loadingthe player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer:
"/jwplayer/player.swf",
file:
"/uploads/video.mp4",
height:
,
width:
,
skin:
"/skins/modieus/modieus.zip"
});
</script>
注意:假设您正在配置主要在HTML5 mode中执行的JW Player,你的皮肤的目录结构看起来应该像这样:
/skins/modieus/modieus.zip
/skins/modieus/modieus.xml
/skins/modieus/controlbar/
/skins/modieus/playlist/
etc.
很多其它皮肤下载: rev=1035&order=name">http://developer.longtailvideo.com/trac/browser/skins?rev=1035&order=name
playlist
该选项用于设置JW Player播放列表。样例例如以下:
<div id="container">Loadingthe player...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer:
"/jwplayer/player.swf",
playlist: [
{ duration:
,
file: "/uploads/video.mp4",
image:"/uploads/video.jpg"},
{ duration:
,
file: "/uploads/bbb.mp4",
image:"/uploads/bbb.jpg"
},
{ duration:
,
file: "/uploads/ed.mp4",
image:"/uploads/ed.jpg"
}
],
"playlist.position":
"right",
"playlist.size":
,
height:
,
width:
});
</script>
一个播放列表能够包括一个或多个视频文件,每个文件都支持例如以下属性:
file:假设没有设置levels选项,则该项为必选项)。该项用来指定媒体的位置。
假设未设置此属性,playlist项将被忽略;
image:用来设置视频海报图片,是播放列表的一部分,该图片显示在视频播放前和视频播放完毕后;
duration:视频的持续时间。单位为秒。该播放器用该选项将视频持续时间显示在控制栏和图片列表中。
start:视频播放时间点。
当用户播放该视频文件时。视频将不会从头播放,而是从该选项设定的播放时间点開始播放;
title:视频标题,显示在图形播放列表中;
description:视频描写叙述信息。显示在图形播放列表中;
streamer:设定视频流应用。仅用于RTMP或HTTP流;
provider:设置用于回放播放列表视频的特定媒体回放API(如HTTP,RTMP或YouTube);
levels:设定视频播放的质量等级。
Levels
levels配置项同意将一个视频的多个质量等级载入到播放器中。
Flash播放器使用这些设定的质量等级实现RTMP或HTTP码率切换。
比特率转换是一种播放器为每一位视频观看者自己主动显示最佳视频质量的机制。
以下展示使用RTMP码率切换(又称动态流)的一个样例。注意这里使用了“streamer”配置项,该配置项用来告诉播放器RTMPserver的位置:
<div id="container">Loadingthe player...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer:
"/jwplayer/player.swf",
height:
,
width:
,
image:
"/thumbs/video.jpg",
levels: [
{ bitrate:
,
file: "videos/video_300k.mp4",
width:
320 },
{ bitrate:
,
file: "videos/video_600k.mp4",
width:
480 },
{ bitrate:
,
file: "videos/video_900k.mp4",
width:
720 }
],
provider:
"rtmp",
streamer:
"rtmp://rtmp.example.com/application/"
});
</script>
以下这个样例使用了HTTP码率切换。
通过为http设定“provider”配置项来启用HTTP码率切换:
<div id="container">Loadingthe player...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer:
"/jwplayer/player.swf",
height:
,
width:
,
image:
"/thumbs/video.jpg",
levels: [
{ bitrate:
,
file: "http://example.com/videos/video_300k.mp4",width:
320 },
{ bitrate:
,
file: "http://example.com/videos/video_600k.mp4",width:
480 },
{ bitrate:
,
file: "http://example.com/videos/video_900k.mp4",width:
720 }
],
provider:
"http","http.startparam":"starttime"
});
</script>
在HTML5模式中使用levels选项
在HTML5模式中为了兼容各种浏览器。也能够使用levels选项指定交替的视频格式。假设浏览器不支持levels选项中第一个视频文件,那么播放器将使用第二个,以此类推。
例如以下代码:
<div id="container">Loadingthe player...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer:
"/jwplayer/player.swf",
height:
,
width:
,
image:
"/thumbs/video.jpg",
levels: [
{ file:
"/videos/video.mp4" }, // H.264 version
{ file:
"/videos/video.webm" }, // WebM version
{ file:
"/videos/video.ogv" } // Ogg Theroa version
]
});
</script>
Plugins
插件被用于JWPlayer顶部的堆栈。
非常多插件在我们的库中是可用的,比如转发,分析或广告。以下给出一个使用了HD 插件和GoogleAnalytics Pro插件的样例:
<div id="container">Loadingthe player...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer:
"/jwplayer/player.swf",
file:
"/videos/video.mp4",
height:
,
plugins: {
hd: {
file:
"/videos/video_high.mp4",
fullscreen:
true },
gapro: {
accountid:
"UKsi93X940-24" }
},
image:
"/thumbs/video.jpg",
width:
});
</script>
以下再给出一个使用了sharing插件的样例,在该样例中插件的參数被包含在了playlist块内:
<div id="container">Loadingthe player...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer:
"/jwplayer/player.swf",
playlist: [
{
file: "/videos/bunny.mp4",
"sharing.link":"http://bigbuckbunny.org"},
{
file: "/videos/ed.mp4",
"sharing.link":"http://orange.blender.org"
}
],
plugins: {
sharing: {
link: true
}
},
height,
width
});
</script>
Events
events块同意你向播放器事件上加入JavaScript脚本。
这是一个增强网页交互性的强慷慨法。以下给出一个简答的样例:
<div id="container">Loadingthe player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer:
"/jwplayer/player.swf",
file:
"/videos/video.mp4",
height:
,
width:
,
events: {
onComplete:
function() {
alert("the video is finished!"); }
}
});
</script>
以下再给出一个含有两个事件处理的样例。
注意:onReady()方法使用this声明自己主动启动播放器。onVolume()方法处理正在处理的事件:
<div id="container">Loadingthe player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer:
"/jwplayer/player.swf",
file:
"/videos/video.mp4",
height:
,
width:
,
events: {
onReady:
function() {
this.play(); },
onVolume:
function(event) {
alert("the new volume is"+event.volume);
}
}
});
</script>
要查看全部事件及其属性。请參考API,其网址为:http://www.longtailvideo.com/support/jw-player/28850/using-the-javascript-api,
也可參考API目录中的word文档。
Modes
modes配置项被用来指定渲染播放器JW Player所使用不同浏览器技术的顺序,JW Player使用的默认顺序为:
1、Flash 插件。
2、HTML5中的video标签。
3、一个源文件的下载链接。
以下给出一段代码,让html5播放器放在最前面;
<div id="container">Loadingthe player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
file:
"/videos/video.mp4",
height:
,
width:
,
modes: [
{ type:
"html5" },
{ type:
"flash",
src: "/jwplayer/player.swf"
},
{ type:
"download" }
]
});
</script>
modes的详细配置(5.5版本号)
能够为每一个模式指定可替换的播放器配置,假设播放器嵌入在一个特定的模式中,那么它将覆盖默认的配置。
<div id="container">Loading the player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
height,
width,
image: "http://server.com/images/thumbnail.jpg",
modes: [
{ type:
"flash",src:
"/jwplayer/player.swf",config: {
file:
"video.mp4",
streamer:
"rtmp://rtmp.server.com/videos",
provider:
"rtmp"
}
},
{ type:
"html5",config: {
file:
"http://server.com/videos/video.mp4"
}
},
{ type:
"download" }
]
});
</script>
Player Removal
使用例如以下代码能够去除播放器
jwplayer("container").remove();
remove方法将使播放器停止播放。DOM又一次设置为原来的状态,全部的事件侦听器被清除。
获取很多其它关于具体。请訪问http://www.jwplayer.com/
网址。
JWPlayer高速入门指南(中文)的更多相关文章
- Spark高速入门指南(Quick Start Spark)
版权声明:本博客已经不再更新.请移步到Hadoop技术博客:https://www.iteblog.com https://blog.csdn.net/w397090770/article/detai ...
- JWPlayer快速入门指南(中文)
将JW Player嵌入到网页中非常的简单,只需要进行如下3个步骤: 1.解压mediaplayer-viral.zip文件,将jwplayer.js和player.swf文件拷贝到工程中: 2.在页 ...
- sphinx中文入门指南 (转自sphinx中文站)
Sphinx中文入门指南 wuhuiming<blvming在gmail.com>,转载请注明来源和作者 最后修改:2010年1月23日 1.简介 1.1.Sphinx是什么 1.2.Sp ...
- 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍
我们在前一篇文章微软新神器-Power BI,一个简单易用,还用得起的BI产品中,我们初步介绍了Power BI的基本知识.由于Power BI是去年开始微软新发布的一个产品,虽然已经可以企业级应用, ...
- 一起学微软Power BI系列-官方文档-入门指南(2)获取源数据
我们在文章: 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍中,我们介绍了官方入门文档的第一章.今天继续给大家介绍官方文档中,如何获取数据源的相关内容.虽然是英文,但 ...
- 一起学微软Power BI系列-官方文档-入门指南(3)Power BI建模
我们前2篇文章:一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍 和一起学微软Power BI系列-官方文档-入门指南(2)获取源数据 中,我们介绍了官方入门文档与获取 ...
- 一起学微软Power BI系列-官方文档-入门指南(4)Power BI的可视化
在前面的系列文章中,我们介绍了官方有关获取数据,以及建模的原始文档和基本介绍.今天继续给大家介绍官方文档中,有关可视化的内容.实际上获获取数据和建模更注重业务关系的处理,而可视化则关注对数据的解读.这 ...
- 一起学微软Power BI系列-官方文档-入门指南(5)探索数据奥秘
我们几篇系列文章中,我们介绍了官方入门文档与获取数据等基本知识.今天继续给大家另外一个重点,探索数据奥秘.有了数据源,有了模型,下一步就是如何解析数据了.解析数据的过程需要很多综合技能,不仅仅是需要掌 ...
- 一起学微软Power BI系列-官方文档-入门指南(6)Power BI与Excel
今天介绍了官方入门文档中有关PowerBI和Excel的知识.前几篇入门文档有点仓促,加上最近时间的研究,会有更多技巧性和入门型的文章或者视频发布,最后2篇入门文档将更加详细一点,因为部分文章进行简单 ...
随机推荐
- OpenGL视图--gluPerspective glOrtho glFrustum gluLookAt
void gluPerspective( GLdouble fovy, GLdouble aspect, GLdouble zNear, GLdouble zFar ) near 和 far 决定了投 ...
- SecureRandom-随机数的生成
随机数:算法+种子 随机数据不随机 学习了:https://www.cnblogs.com/deng-cc/p/8064481.html StringBuffer buffer = new Strin ...
- Reinvent the Wheel Often
Reinvent the Wheel Often Jason P. Sage Just use something that exists-it's silly to reinvent the whe ...
- [Algorithm] Find first missing positive integer
Given an array of integers, find the first missing positive integer in linear time and constant spac ...
- 内有干货!2个人3个月怎样从零完毕一款社区App《林卡》
嘿,大家好.我是不灭的小灯灯,我赌5毛你没听说过我的名字... 好啦.这篇不是鸡汤,是经验吐槽.干货分享! 所以乱七八糟的就不多说了.直接切入正题. 先说下自己的情况背景,眼下尚未毕业.非计算机专业, ...
- js数组对象深度复制
var deepCopy = function(o) { if (o instanceof Array) { var n = []; for (var i = 0; i < o.length; ...
- Linux中如何开启8080端口供外界访问
装好Tomcat7后,发现除了本机能访问外界访问不了,岂有此理.于是请教百度大神,在费一番周折后,总结步骤如下: 1.修改文件/etc/sysconfig/iptables [root@bogon ~ ...
- PS中标尺工具在哪里
打开photoshop应用程序,然后在PS菜单中点击“视图——标尺”选项即可打开ps标尺栏. 单位设置: 按Ctrl+K快捷键会弹出“首选项”对话框,你选择“单位与标尺”项,在“单位”一栏里 ...
- Hadoop内部的限流机制
前言 文章标题一開始提及到了一个令人感到有些抽象又显得有些非常"大"的词,限流.事实上这个词语在非常多行业都能够用到,比方近期春运,各大主要城市,火车站,地铁站都要做到限流吧,避免 ...
- Linux的网卡由eth0变成了eth1怎么办?
Linux的网卡由eth0变成了eth1怎么办? Linux的网卡由eth0变成了eth1,如何修复 使用wmware安装了linux,安装成功后,使用的网卡是eth0,没有eth1.但是用过一段时间 ...