最后的效果

1、从官网下载JWPlayer

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

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

  1. <html><head>
  2. <title>Greenpeace: Aurora</title>
  3. <style>
  4. body, html,.full-size{overflow: hidden;padding: 0;margin: 0;width: 100%;height: 100%;background: transparent;}
  5. </style>
  6. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  7. <script src="jwplayer.js"></script>
  8. </head>
  9. <body>
  10. <div id="videoPlayer_wrapper" style="position: relative; width: 100%; height: 100%;">
  11. <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">
  12. <param name="allowfullscreen" value="true">
  13. <param name="allowscriptaccess" value="always">
  14. <param name="seamlesstabbing" value="true">
  15. <param name="wmode" value="opaque">
  16. <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">
  17. </object>
  18.  
  19. </div>
  20.  
  21. <script type="text/javascript">
  22. jwplayer("videoPlayer").setup({
  23. "width": "100%",
  24. "height": "100%",
  25. "image": "http://images.dazedcdn.com/786/dd/1040/7/1047877.jpg",
  26. "file": "http://pseudo01.hddn.com/vod/dazeddigital.dazedgroup1/videos/1362-greenpeace-aurora.mp4",
  27. "skin": "http://static.dazedcdn.com/swf/html5-dazed-skin/dazeddigital.zip",
  28. "stretching": "uniform",
  29. "provider": "http",
  30. "id": "videoPlayer",
  31. "bufferlength": "5",
  32. "autostart": false,
  33. "logo.hide": true,
  34. /* Please can you add in the info for embed of remove the plugin */
  35. "plugins": {
  36. "sharing-3": {
  37. Video ID Has to added after "/embed/"
  38. "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",
  39. // Page URL has to go here. (For Sharing)
  40. "link": "http://www.dazeddigital.com/video/greenpeace-aurora/1362"
  41. },
  42. /*Also will need data added - UA-753100-14 instead of _videogaq js?*/
  43. "gapro-2": {
  44. "trackingobject": "_gaq",
  45. "idstring": "Greenpeace: Aurora",
  46. "trackstarts": true,
  47. "trackpercentage": true,
  48. "tracktime": true
  49. }
  50. },
  51.  
  52. "modes": [
  53. { "type": "flash", "src": "http://static.dazedcdn.com/swf/player-v5-8.swf" },
  54. { "type": "html5" }
  55. ]
  56. });
  57. </script>
  58. </body></html>

说明:

file为要播放的视频路径,

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

skin为设置具体的皮肤

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

3、动态load文件

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

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

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

JWPlayer 使用小记的更多相关文章

  1. [原]Paste.deploy 与 WSGI, keystone 小记

    Paste.deploy 与 WSGI, keystone 小记 名词解释: Paste.deploy 是一个WSGI工具包,用于更方便的管理WSGI应用, 可以通过配置文件,将WSGI应用加载起来. ...

  2. MySql 小记

    MySql  简单 小记 以备查看 1.sql概述 1.什么是sql? 2.sql发展过程? 3.sql标准与方言的关系? 4.常用数据库? 5.MySql数据库安装? 2.关键概念 表结构----- ...

  3. Git小记

    Git简~介 Git是一个分布式版本控制系统,其他的版本控制系统我只用过SVN,但用的时间不长.大家都知道,分布式的好处多多,而且分布式已经包含了集中式的几乎所有功能.Linus创造Git的传奇经历就 ...

  4. 广州PostgreSQL用户会技术交流会小记 2015-9-19

    广州PostgreSQL用户会技术交流会小记 2015-9-19 今天去了广州PostgreSQL用户会组织的技术交流会 分别有两个session 第一个讲师介绍了他公司使用PostgreSQL-X2 ...

  5. 东哥读书小记 之 《MacTalk人生元编程》

         一直以来的自我感觉:自己是个记性偏弱的人.反正从小读书就喜欢做笔记(可自己的字写得巨丑无比,尼玛不科学呀),抄书这事儿真的就常发生俺的身上. 因为那时经常要背诵课文之类,反正为了怕自己忘记, ...

  6. Paypal支付小记

    Paypal支付小记 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !impo ...

  7. jwplayer播放器停止 单页内多个jwplayer对象停止问题

    单页内多个jwplayer对象停止问题,一直没有找到单页内多个jwplayer播放器停止问题,点击其中一个停止其他播放器; 整个播放代码Remove(),这样就可以停止了,也在ie下防止暂停不了.重音 ...

  8. linux 下cmake 编译 ,调用,调试 poco 1.6.0 小记

    上篇文章 小记了: 关于 Poco::TCPServer框架 (windows 下使用的是 select模型) 学习笔记. http://www.cnblogs.com/bleachli/p/4352 ...

  9. mongodb入门学习小记

    Mongodb 简单入门(个人学习小记) 1.安装并注册成服务:(示例) E:\DevTools\mongodb3.2.6\bin>mongod.exe --bind_ip 127.0.0.1 ...

随机推荐

  1. 整个网站灰度显示css代码

    body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms- ...

  2. classic asp中使用ADODB.Command防止sql injection

    原始代码如下 Set Conn = Server.CreateObject("Adodb.Connection") Conn.Open "Provider=Microso ...

  3. Others in life

    耗电量主要是与电机有关,800W电机在48V下的工作电流大约是800/48=16.7A,因此其工作时间主要取决于电池的容量,如果电池容量是20Ah,那么大概也就连续工作1个小时左右,也就是30-40k ...

  4. 电池和Adapter切换电路改进实验

    目的:很多单电池的机器在大负载的情况下,如把背光开到最亮,运行3D游戏,此时拔DC电源很容易出现机器死机,或花屏现象: 原因:Q5的导通时间不够,希望通过G极的快速放电,加快到导通时间: 修改前的电路 ...

  5. shell 学习笔记1501-1800

    .巧用bash的{}扩展备份目录: cp file.txt{,.bak} .利用at执行一次性命令: echo "ls -l" | at midnight #Execute a c ...

  6. poj2328---"right on"进入下一个case的模板(while)

    #include <stdio.h> #include <stdlib.h> #include<string.h> int main() { ]; ,end=; w ...

  7. poj 2540 Hotter Colder 切割多边形

    /* poj 2540 Hotter Colder 切割多边形 用两点的中垂线切割多边形,根据冷热来判断要哪一半 然后输出面积 */ #include <stdio.h> #include ...

  8. C++_auto

    自动变量,自动获取类型,输出,泛型 自动变量,可以实现自动循环一维数组 自动循环的时候,对应的必须是常量 //auto自动变量,自动匹配类型 #include <iostream> usi ...

  9. mongodb查询关于大于小于的用法;

    mongoDB查询操作符: http://www.runoob.com/mongodb/mongodb-operators.html 项目中需要的场景是这样的,每个人每天只能领取一张明信片,换句话说, ...

  10. WKWebView与sessionID的因果

    问题描述:在webView中点击下载按钮后,下载成功文件,然后再去点击上传文件,这时候服务器会报用户未登录错误. 暂时分析的原因是WKWebView在下载后cookie会保存服务器产生的session ...