• JWPlayer 使用小记


    最后的效果



    1、从官网下载JWPlayer     

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



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

    <html><head>
        <title>Greenpeace: Aurora</title>
        <style>
            body, html,.full-size{overflow: hidden;padding: 0;margin: 0; 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;  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



  • 相关阅读:
    c# gdi设置画刷透明
    char,varchar,nvarchar,text区别与联系
    banner无缝轮播【小封装】
    div中的内容垂直居中的五种方法
    jQuery hover() 方法
    年过三十,我为什么要学习ios 与安卓App 移动端技术
    CentOS 中用 Split 命令分割文件的方法
    centos E440 安装无线网卡
    CentOS7修改默认运行级别
    iwconfig: command not found 解决方案
  • 原文地址:https://www.cnblogs.com/keanuyaoo/p/3327457.html
Copyright © 2020-2023  润新知