欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JWPlayer 使用小记

程序员文章站 2022-05-03 19:16:20
最后的效果     1、从官网下载JWPlayer        下载后的文件,标红部分是必要的文件。...
最后的效果

JWPlayer 使用小记

 

 

1、从官网下载JWPlayer     

 

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

 

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>  
<p 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>  
  
</p>  
      
<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