最近在做一个cms网站项目,网站内容中包含一些视频内容,客户之前的视频都是腾讯视屏,向优酷购买了去广告服务,所以我们需要在cms系统中整合一下优酷视频播放器的代码;
优酷官方的参考文档:http://cloud.youku.com/docs?id=115
其实去广告很简单,你可以购买优酷会员啊!!!
购买去广告服务后,优酷会提供给你一个client_id,播放器的一个参数;
<html> <body> //视频播放器初始化容器 <div id="CuPlayer" style="width:700px;height:500px;"> <iframe height="100%" width="100%" frameborder=0 'allowfullscreen' src="视频链接"></iframe> <div></body><script>player = new YKU.Player('CuPlayer',{ client_id: '***************',//购买去广告服务后,优酷会提供client_id vid: '优酷视频的ID',//你所使用的优酷视频一定会有2个链接,一个动态、一个静态,静态的连接可以通过浏览器的debug功能查看。我使用的是静态链接; newPlayer: true, isAutoPlay:true});//如://标准优酷静态视频 http://static.youku.com/v20170207.1/v/swf/loader.swf?VideoIDS=XNzI1MjA3MTUy;//动态视频 http://v.youku.com/v_show/id_XNzI1MjA3MTUy.html?from=s1.8-1-1.2&spm=a2h0k.8191407.0.0//视频ID获取很简单,链接中'id_XNzI1MjA3MTUy.html'的'XNzI1MjA3MTUy'即为视频vid,'id_视频ID.html' //纠正一下错误:这个静态链接其实是一个flash视频地址,iphone是无法播放的; 所以选用通用的链接:http://player.youku.com/embed/XMjUyODMxODY4OA== </script> </html> 使用很简单,具体其他参数可以查阅其参考文档;
上述做法正常来说都是可以的,但是也有非正常的情况:最近客户反映说:去广告服务不好使了,后来详细追问,发现是windows10系统自带的浏览器引起,或者说这种做法,在特定的情况下不好使,后来做了调整,如下:
<div id="CuPlayer"> </div> <script type="text/javascript" src="//player.youku.com/jsapi"></script> <script> var vid = '${content.attr.vid}'; var player = new YKU.Player('CuPlayer',{ client_id: 'f12246031796cd87', vid:vid , newPlayer: true, isAutoPlay:true }); </script>需要注意的是,这里没有通过¥$(document).ready();来加载播放器,所以会顺序解析页面,之前将js写在div上面,导致无法正常创建播放器,所以视频失效,调整顺序后,功能恢复正常。
扫描二维码关注公众号,回复:
437956 查看本文章