JWPlayer快速入门指南（中文）

将JW Player嵌入到网页中非常的简单，只需要进行如下3个步骤：

1、解压mediaplayer-viral.zip文件，将jwplayer.js和player.swf文件拷贝到工程中；

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: 270,

width: 480

});

</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: 57,

flashplayer: "/jwplayer/player.swf",

volume: 80,

width: 720

});

</script>

“options”的选项并不仅限于此，它还有如下选项：

skin：设置JW Player皮肤；

playlist: 设置JW Player播放列表；

levels：通过设置比特率来设定不同视频的播放质量等级；

plugins：设置JW Player插件，包括它们的配置选项；

events：给JW Player添加事件，营造执行js脚本的环境；

modes：指定为了渲染播放器JW Player 所使用的不同浏览器技术的顺序；

接下来详细介绍这些选项：

skin

JW Player有各种各样的可用来修改播放器外观和感觉的皮肤。为了嵌入JWPlayer 5的皮肤，只需将压缩文件拷贝到Web服务器上并使用skin选项指定皮肤压缩文件路径即可，代码如下：

<div id="container">Loadingthe player ...</div>

<script type="text/javascript">

jwplayer("container").setup({

flashplayer: "/jwplayer/player.swf",

file: "/uploads/video.mp4",

height: 270,

width: 480,

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.

更多皮肤下载：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: 32, file: "/uploads/video.mp4", image:"/uploads/video.jpg"},

{ duration: 124, file: "/uploads/bbb.mp4", image:"/uploads/bbb.jpg" },

{ duration: 542, file: "/uploads/ed.mp4", image:"/uploads/ed.jpg" }

"playlist.position": "right",

"playlist.size": 360,

height: 270,

width: 720

});

</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”配置项，该配置项用来告诉播放器RTMP服务器的位置：

<div id="container">Loadingthe player...</div>

<script type="text/javascript">

jwplayer("container").setup({

flashplayer: "/jwplayer/player.swf",

height: 270,

width: 480,

image: "/thumbs/video.jpg",

levels: [

{ bitrate: 300, file: "videos/video_300k.mp4", width: 320 },

{ bitrate: 600, file: "videos/video_600k.mp4", width: 480 },

{ bitrate: 900, 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: 270,

width: 480,

image: "/thumbs/video.jpg",

levels: [

{ bitrate: 300, file: "http://example.com/videos/video_300k.mp4",width: 320 },

{ bitrate: 600, file: "http://example.com/videos/video_600k.mp4",width: 480 },

{ bitrate: 900, 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: 270,

width: 480,

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: 270,

plugins: {

hd: { file: "/videos/video_high.mp4", fullscreen: true },

gapro: { accountid: "UKsi93X940-24" }

image: "/thumbs/video.jpg",

width: 480

});

</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: 270,

width: 720

});

</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: 270,

width: 480,

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: 270,

width: 480,

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: 270,

width: 480,

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: 270,

width: 480,

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快速入门指南（中文）相关推荐

2引擎帮助文档_ANSA快速入门指南中文帮助文档浅析（上）
作者 | 团长仿真秀科普作者首发 | 仿真秀公众号(ID:fangzhenxiu2018) 导读:本文是ANSA入门系列第一篇(后续将会在仿真秀官网或APP同步发布).本系列致力于提供ANSA软件 ...
Wolfram|Alpha Notebook Edition中文快速入门指南（可下载）
Wolfram|Alpha Notebook Edition 是一个将 Wolfram|Alpha 和 Mathematica 精华融汇于一身的独立统一工具,可完美应对各种教育和学习需求.使用自由格式 ...
我的《ANSA快速入门指南》中文帮助文档浅析（上）
作者 | 团长仿真秀科普作者导读:本文是ANSA入门系列第一篇(后续将会在仿真秀官网或APP同步发布).本系列致力于提供ANSA软件的中文版,帮助广大初学者迅速入门.本文档内容及图片均来自于ANS ...
【51单片机快速入门指南】6.1：LCD1602的八线、四线控制及自定义符号，完美兼容Proteus仿真
目录硬知识显示特性接口定义操作时序写操作时序读操作时序寄存器忙标志位BF 地址计数器(AC) 显示数据寄存器(DDRAM) CGROM CGRAM 指令清屏指令光标归位指令进入模 ...
【51单片机快速入门指南】5.1：SPI与DS1302时钟芯片
目录硬知识 DS1302 简介 DS1302 使用控制寄存器日历/时钟寄存器 DS1302 的读写时序电路设计示例程序 DS1302.c DS1302.h 测试程序 main.c 实验现象 ...
【51单片机快速入门指南】4.4：I2C 读取HMC5883L / QMC5883L 磁力计
目录硬知识简介操作模式 HMC5883L 连续测量模式单次测量模式闲置模式 QMC5883L 连续测量模式待命模式主要差异寄存器寄存器列表 HMC5883L QMC5883L 配置寄 ...
【51单片机快速入门指南】4.2： SSD1306 OLED屏（0.96寸、1.3寸）的I2C控制详解
目录硬知识 SSD1306简介 I2C 接口从机地址位(SA0) I2C 总线写数据命令解码器晶振电路和显示时间发生器复位图形显示数据RAM (GDDRAM) 命令表基本命令表部分指令 ...
BERT模型超酷炫，上手又太难？请查收这份BERT快速入门指南！
点击上方"AI遇见机器学习",选择"星标"公众号重磅干货,第一时间送达来自 | GitHub 作者 | Jay Alammar 转自 | 机器之心如 ...
BERT模型超酷炫，上手又太难？请查收这份BERT快速入门指南
2019-12-31 10:50:59 选自GitHub 作者:Jay Alammar 参与:王子嘉.Geek AI 如果你是一名自然语言处理从业者,那你一定听说过最近大火的 BERT 模型.本文是一 ...
RMAN快速入门指南
RMAN快速入门指南 1. What is RMAN? 什么是RMAN? 4 2. Terminology 专业词汇解释 4 2.1. Backup sets 备份集合 4 2. ...

JWPlayer快速入门指南（中文）

JWPlayer快速入门指南（中文）相关推荐

最新文章

热门文章