1. <!DOCTYPE html>
  2. <html lang="en-US">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> -->
  7. <meta content="width=640,user-scalable=0" name="viewport" />
  8. </script>
  9. <style>
  10. html,
  11. body,
  12. * {
  13. padding: 0;
  14. margin: 0;
  15. }
  16.  
  17. html,
  18. body {
  19. height: 100%;
  20. }
  21.  
  22. #wrap,
  23. #player {
  24. height: 100%;
  25. }
  26. </style>
  27. </head>
  28.  
  29. <body>
  30. <div id="wrap">
  31. <div id="player">
  32. </div>
  33. </div>
  34. <script>
  35. window.console2 = console;
  36. </script>
  37. // youku 的api 会重写console,导致console.log 失效,所以需要在引入youku api 之前备份console 对象
  38. <script type="text/javascript" src="http://player.youku.com/jsapi"></script>
  39. <script>
  40. console.log('console');
  41. console2.log('console2');
  42. function setYKUPlayer(data) {
  43. console.log('setYKUPlayer,data is:', data);
  44. // client_id 和 styleid 可以忽略
  45. var player = new YKU.Player('player', {
  46. styleid: '1',
  47. client_id: '7307ee0273158588',
  48. vid: data,
  49. });
  50. }
  51. // http://v.youku.com/v_show/id_XMTQxMzM2MjA5Mg==_ev_1.html?from=y1.3-idx-uhome-1519-20887.205805-205902.1-1
  52. // 在id_ 后面截取视频id:XMTQxMzM2MjA5Mg==
  53. setYKUPlayer('XMTQxMzM2MjA5Mg==');
  54. </script>
  55. </body>
  56.  
  57. </html>

优酷播放器demo的更多相关文章

  1. ios音乐播放器demo

    闲暇时间,写了一个音乐播放器. 个人认为,基于Demo 的学习是最有效果的. 想学习的同学,欢迎下载.知识,只有在传播的时候才有价值. 不懂之处,欢迎留言询问,将热情解答. 运行图 项目结构图 Git ...

  2. .NET APlayer播放器 demo

    工作需要,想开发一款播放器,当无意间浏览到APlayer的时候大爱啊,有木有迅速投入精力,在APlayer论坛看大牛们的作品及经验,看SDK中提供的chm电子书最后看了博客园中周见智的文章(灰常好!最 ...

  3. AVPlayer的使用+简单的播放器Demo

    学习内容 AVPlayer学习 几个播放器相关的类 AVPlayer.AVURLAsset.AVPlayerItem.AVPlayerLayer //控制播放器的播放.暂停.播放速度 @propert ...

  4. react-native绑定优酷SDK播放视频-附效果和git源码

    ReactNative绑定优酷SDK需要用到两部分知识: 优酷本身的sdk绑定: RN与原生界面的交互: 效果: RN版本:0.49.3 代码更新日期:2017.10.26 下文也根据绑定优酷需要的两 ...

  5. react-native绑定优酷SDK-附效果图和源码

    ReactNative绑定优酷SDK需要用到两部分知识: 优酷本身的sdk绑定: RN与原生界面的交互: 效果: RN版本:0.49.3 代码更新日期:2017.10.26 下文也根据绑定需要分为两部 ...

  6. .NET中使用APlayer组件自制播放器

    目录 说明 APlayer介绍 APlayer具备功能 APlayer使用 自制播放器Demo 未完成工作 源码下载 说明 由于需求原因,需要在项目中(桌面程序)集成一个在线播放视频的功能.大概要具备 ...

  7. 一款全兼容的播放器 videojs

    [官网]http://www.videojs.com/ videojs就提供了这样一套解决方案,他是一个兼容HTML5的视频播放工具,早期版本兼容所有浏览器,方法是:提供三个后缀名的视频,并在不支持h ...

  8. 【API】获取优酷视频信息接口

    序:        自己的网站中需要接入一个视频模块,虚拟主机的空间小所以只能引用第三方的链接.感觉国内优酷好不错,所以查了一下优酷的接口. 0x00:        先去优酷API开放中心申请一个开 ...

  9. 7款超具个性的HTML5播放器

    这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器的大部分功能,并以HTML5和JavaScript实现.这些HTML5播放器有着非常漂亮的外观,很多你都无需自己重新定 ...

随机推荐

  1. (原+转)error C2872: “ACCESS_MASK”: 不明确的符号 C:\Program Files (x86)\Windows Kits\8.1\Include\um\ktmw32.h 125

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5500795.html 参考网址: http://www.lxway.com/88515256.htm ...

  2. 解决MySQL中文乱码的问题

    遇到中文乱码问题,首先用status命令检查数据库的配置,如下: 上图会显示数据库配置的各项信息. 还可以用 show create database XXX,来显示创建数据库的时候的编码设置. 一般 ...

  3. Java的Date类与Calendar类

    一:Date类 在JDK1.0中,Date类是唯一的一个代表时间的类,但是由于Date类不便于实现国际化,所以从JDK1.1版本开始,推荐使用Calendar类进行时间和日期处理.这里简单介绍一下Da ...

  4. innobackupex 使用说明

    1.创建备份相关用户 '; grant reload,lock tables,replication client,process,super on *.* to 'backuper'@'127.0. ...

  5. 八、桥接模式--结构模式(Structural Pattern)

    桥梁模式:将抽象化(Abstraction)与实现化 (Implementation)脱耦,使得二者可以独立地变化. 桥梁模式类图: 抽象化(Abstraction)角色:抽象化给出的定义,并保存 一 ...

  6. Wpf中MediaElement循环播放

    原文:Wpf中MediaElement循环播放 前一段时间做了一个项目,里面牵涉到媒体文件的循环播放问题,在网上看了好多例子,都是在xaml中添加为MediaElement添加一个TimeLine,不 ...

  7. undefined reference to `png_set_longjmp_fn'

    这个是在Linux上编译项目的时候,一个动态库层用到的一个函数实现未找到,即使我链接了libpng2也没有找到,原因是这个库老了一些,没有这个函数定义,需要链接更高版本的png库,CentOS上有了在 ...

  8. 用于下载AD官网登录账号:User name: fuxin918@fuxin918.com Passeword: s6c0W1w8

    用于下载AD官网登录账号:User name: fuxin918@fuxin918.com Passeword:  s6c0W1w8

  9. 有序线性搜索(Sorted/Ordered Linear Search)

    如果数组元素已经排过序(升序),那我们搜索某个元素就不必遍历整个数组了.在下面给出的算法代码中,到任何一点,假设当前的arr[i]值大于搜索的值data,就可以停止搜索了. #include<s ...

  10. UML_活动图

    一.活动图的组成元素 Activity Diagram Element 1.活动状态图(Activity) 2.动作状态(Actions) 3.动作状态约束(Action Constraints) 4 ...