JW Player 存储在自己的服务器上的设置

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

这个视频我们来演示一下在自己服务器上存储 JW Player 来播放视频 … 在这里,我们先输入一小段注释 .. <!-- 播放器开始 -->

另起一行 … 首先我们要嵌入 JW Player 的 jwplayer.js 这个脚本文件 … 这也是 JW Player 6 唯一让我们在页面中嵌入的文件 ..

可以使用 <script> 标签 … <script src="player/jwplayer.js"></script> .. 因为 jwplayer.js 相对于我们正在编辑的 index.html 这个文件来说,它的位置是在 player 目录的下面 … 所以嵌入的时候,地址里要先加上一个 player … 然后是 jwplayer.js …

下面我们要做的是为播放器添加一个容器 … 可以使用 <div> 标签 …

<div></div>

为了让 JW Player 识别到这个容器,我们可以在上面添加一个 ID .. 这个 ID 的名称可以随便定义 … 一会在输入 JW Player 设置代码的时候,需要匹配这个 ID 的名称 …

<div id="ninghao-player">努力加载中...</div>

容器里可以再加点文字 … 在播放器没有加载的时候,会显示这里的文字 …

下面我们要做的就是定义 JW Player 嵌入的代码 …

先输入一组 <script> 标签 …

在里面再输入 jwplayer("") 在引号之间,要输入我们在播放器容器上定义的那个 ID … 这里是 ninghao-player …

后面加上一个 .setup({}) …

在这个 setup 里面的大括号里,我们需要进一步去定义相关的参数 .. 比如播放器的高度,宽度 … 要播放的视频文件等等 …

<script type="text/javascript">
jwplayer("myElement").setup({
file: "/uploads/myVideo.mp4",
image: "/uploads/myPoster.jpg"
});
</script>

我们先用一个 file … 来定义要播放的视频文件 … file: "" … 在 file 后面的引号里输入视频文件的路径 ….

相对于这个网页 … 在 video 目录下有一个视频文件 … (#打开)

croods-02.mp4 …

在 file 后面的引号之外 … 用一个英文状态下的逗号分隔一下其它的参数 …

另起一行,再用 image … 去定义视频的封面图像 … 把图像文件的路径放在 image 后面的引号里 …

在 video 目录下,有一张跟视频文件名一样的图像文件 ….

croods-02.png …

好,这就是 JW Player 的最基本的设置 … 现在,在网页上就应该可以使用 JW Player 去播放在 video 目录下的那个视频文件了 …. 保存一下 ….

然后到浏览器里预览一下 …. 在页面上会显示 JW Player 播放器 … 外观使用的是 JW Player 6 默认的皮肤 …

视频没播放之前会显示我们在 image 里面指定的图像 …

点击播放按钮 … 可以播放在 file 里面指定的视频文件 ….

JW Player 存储在自己的服务器上的设置《 JW Player 播放器 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点