JWPlayer 使用小记

最后的效果

1、从官网下载JWPlayer

下载后的文件，标红部分是必要的文件。

2、Jquery可以使用1.6以上版本

<html><head><title>Greenpeace: Aurora</title><style>body, html,.full-size{overflow: hidden;padding: 0;margin: 0;width: 100%;height: 100%;background: transparent;}</style><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script src="jwplayer.js"></script>
</head>
<body>
<div id="videoPlayer_wrapper" style="position: relative; width: 100%; height: 100%;">
<object type="application/x-shockwave-flash" data="http://static.dazedcdn.com/swf/player-v5-8.swf" width="100%" height="100%" bgcolor="#000000" id="videoPlayer" name="videoPlayer" tabindex="0">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="seamlesstabbing" value="true">
<param name="wmode" value="opaque">
<param name="flashvars" value="netstreambasepath=http%3A%2F%2Fwww.dazeddigital.com%2Fembed%2F1362&id=videoPlayer&image=http%3A%2F%2Fimages.dazedcdn.com%2F786%2Fdd%2F1040%2F7%2F1047877.jpg&file=http%3A%2F%2Fpseudo01.hddn.com%2Fvod%2Fdazeddigital.dazedgroup1%2Fvideos%2F1362-greenpeace-aurora.mp4&skin=http%3A%2F%2Fstatic.dazedcdn.com%2Fswf%2Fhtml5-dazed-skin%2Fdazeddigital.zip&stretching=uniform&provider=http&bufferlength=5&autostart=false&plugins=http%3A%2F%2Flp.longtailvideo.com%2F5%2Fsharing%2Fsharing.swf&sharing.code=%253Ciframe%2520src%3D%2522http%3A%2F%2Fwww.dazeddigital.com%2Fembed%2F1362%2522%2520width%3D%2522420%2522%2520height%3D%2522237%2522%2520frameborder%3D%25220%2522%2520webkitAllowFullScreen%2520allowFullScreen%253E%253C%2Fiframe%253E&sharing.link=http%3A%2F%2Fwww.dazeddigital.com%2Fvideo%2Fgreenpeace-aurora%2F1362&sharing.pluginmode=HYBRID&controlbar.position=over&logo.hide=true">
</object></div><script type="text/javascript">jwplayer("videoPlayer").setup({"width": "100%","height": "100%","image": "http://images.dazedcdn.com/786/dd/1040/7/1047877.jpg","file": "http://pseudo01.hddn.com/vod/dazeddigital.dazedgroup1/videos/1362-greenpeace-aurora.mp4","skin": "http://static.dazedcdn.com/swf/html5-dazed-skin/dazeddigital.zip","stretching": "uniform","provider": "http","id": "videoPlayer","bufferlength": "5","autostart": false,"logo.hide": true,/* Please can you add in the info for embed of remove the plugin */"plugins": {"sharing-3": {Video ID Has to added after "/embed/""code": "%3Ciframe%20src=%22" + "http://www.dazeddigital.com/embed/1362" + "%22%20width=%22420%22%20height=%22237%22%20frameborder=%220%22%20webkitAllowFullScreen%20allowFullScreen%3E%3C/iframe%3E",// Page URL has to go here. (For Sharing)"link": "http://www.dazeddigital.com/video/greenpeace-aurora/1362"},/*Also will need data added - UA-753100-14 instead of _videogaq js?*/"gapro-2": {"trackingobject": "_gaq","idstring": "Greenpeace: Aurora","trackstarts": true,"trackpercentage": true,"tracktime": true}},"modes": [{ "type": "flash", "src": "http://static.dazedcdn.com/swf/player-v5-8.swf" },{ "type": "html5" }]});
</script>
</body></html>

说明：

file为要播放的视频路径，

image为设置未播放的封面图片

skin为设置具体的皮肤

plugins可以做些插件，比如分享、播放视屏前，播放几秒广告等。

3、动态load文件

file为要播放的视频路径，image为设置未播放的封面图片。

jwplayer().load([{file:fielUrl,image:imageUrl}]);

4、其他的一些操作可以参考JWplayer提供的API

JWPlayer 使用小记相关推荐

hp-ux 集群，内存小记
hp-ux 集群,内存小记 -----查看hp 集群状态信息 # cmviewcl -v CLUSTER STATUS dbsvr up ...
＜笔记2＞numpy的生成随机数用法小记
numpy的生成随机数用法小记 numpy生成随机数 <以下图片来自黑马程序猿录播课程笔记> import numpy as np import random #random 生产随机数 ...
jwplayer使用
2019独角兽企业重金招聘Python工程师标准>>> http://www.longtailvideo.com/support/jw-player/jw-player-for-fl ...
2021年中寻找新SAP项目机会小记
2021年中寻找新SAP项目机会小记最近一段时间,笔者有在酝酿下一个SAP项目机会.在与相关业界同仁洽谈项目机会的过程中,笔者发现自己还是在犯一些低级错误,感觉自己还是太不够理性和成熟. 1,事情没 ...
K项目小记 - 项目已开工整整四周！
K项目小记 - 项目已开工整整四周! 至今天,K项目已经推进到了第四周.这四周时间里,我们项目组全体成员经历了一段刻骨铭心的战斗时光.我们每天开会,谈流程,展示全球模板,找GAP.K项目是以客户总部的 ...
肺炎疫情期间购买口罩小记
肺炎疫情期间购买口罩小记谁都不曾想到,平时不怎么用到的口罩,在此次肺炎疫情期间,突然成为紧俏物资,重要物资. 早在疫情爆发初期,就在新闻报道里听说医护人员缺少医护物资,其中就有各种级别的口罩.此时笔 ...
SAP MM 进销存报表优化小记
SAP MM 进销存报表优化小记笔者刚刚加入SY项目,就接到了SY集团上海总部SAP运维部门负责人的工作分配,说是有一只进销存报表,需要做一个优化,可能是需要重新设计重新开发. 笔者研究了他们现行进 ...
Flex+J2EE 之小记
Flex+J2EE 之小记 Jack. Wang 2008-9-10(本待完善...) wbjeasygo@163.com 由于本人也是初学者(刚看了两天视频),所以请高手指点,这里赞下 blog ...
thrift使用小记_CUDev-ChinaUnix博客
thrift使用小记_CUDev-ChinaUnix博客 thrift使用小记 (2011-09-19 21:28) 标签: 客户端接口 Facebook transport protoc ...

JWPlayer 使用小记

JWPlayer 使用小记相关推荐

最新文章

热门文章