apicloud apicloud

注册
查看: 6843|回复: 10

[模块教程] 网易云视频模块demo分享

职业车手

UID:441392

主题:
33
帖子:
2306
云币:
2775

APICloud粉丝志愿者一周年中秋节女朋友装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章不觉明厉强者王者足球狗捣蛋鬼儿童节快乐

[模块教程] 网易云视频模块demo分享

6843 10 | 发表于 2018-1-23 11:29:56 |阅读模式 | |
今天分享一个网易云视频模块的demo。

视频播放相关的模块辣么多,为森么要写这个模块的demo呢。也是有经历的。

故事发生在我的辛酸求职路上。

当时我求职一家公司,该公司做炒股方面教学。

面试官:“有没有做过视频相关的项目?


我:“没有,但是写过一些视频相关的demo学习。贵公司做视频播放用的自己的东西还是某个模块?


面试官藐视的说:“我们用的网易云视频模块。


我:“那我可以回去看一下相关文档,不会有什么问题。


面试官:“回去等消息吧!



等消息大家都懂得。。。

言归正传,有小伙伴问我视频播放的问题,就随手写了一个demo。

模块:neteasePlayer   


价格:原价:599 活动价:298   










我是试用的。。
千万、一定、必须添加模块然后编译自定义loader

index.html代码:
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.     <title>index</title>
  8.     <link rel="stylesheet" type="text/css" href="./css/aui.css" />
  9. </head>
  10. <body>
  11.     <header class="aui-bar aui-bar-nav" id="header">视频</header>
  12.     <footer class="aui-bar aui-bar-tab" id="footer">
  13.             <div class="aui-bar-tab-item aui-active" tapmode>
  14.                 <i class="aui-iconfont aui-icon-video"></i>
  15.                 <div class="aui-bar-tab-label">视频</div>
  16.             </div>
  17.             <div class="aui-bar-tab-item" tapmode>
  18.                 <i class="aui-iconfont aui-icon-gear"></i>
  19.                 <div class="aui-bar-tab-label">设置</div>
  20.             </div>
  21.         </footer>
  22. </body>
  23. <script type="text/javascript" src="./script/api.js"></script>
  24. <script type="text/javascript" src="./script/aui-tab.js"></script>
  25. <script type="text/javascript">
  26.         /**
  27.          * api初始化
  28.          */
  29.     apiready = function(){
  30.             //状态栏沉浸式
  31.             $api.fixStatusBar($api.dom('header'));
  32.             api.parseTapmode();
  33.             fnInitGroup();
  34.     };
  35.    
  36.     /**
  37.      * 初始化frame组
  38.      */
  39.     function fnInitGroup(){
  40.             frameIndex=0;
  41.             title = ["视频","设置"];
  42.                 frames_main = ["video","setting"];
  43.             openFrame(frameIndex);
  44.     };
  45.    
  46.     /**
  47.      * 打开frame
  48.      *
  49.      * @param {Object} index
  50.      */
  51.     function openFrame(index){
  52.             $api.text($api.dom("header"),title[index]);
  53.             api.openFrame({
  54.                 name:frames_main[index],
  55.                 url: "./html/"+frames_main[index]+".html",
  56.                 rect: {
  57.                         x:0,
  58.                         y:$api.dom('header').offsetHeight,
  59.                         w:api.winWidth,
  60.                         h:api.winHeight - $api.dom('header').offsetHeight - $api.dom('footer').offsetHeight
  61.                 },
  62.                 scrollEnabled: false,
  63.         });
  64.     };
  65.    
  66.     /**
  67.      * 点击底部按钮
  68.      */
  69.     var tab = new auiTab({
  70.         element:document.getElementById("footer"),
  71.         index:1,
  72.         repeatClick:false
  73.     },function(ret){
  74.                 frameIndex = ret.index-1;
  75.                 openFrame(frameIndex);
  76.     });   
  77.    
  78. </script>
  79. </html>
复制代码


video.html代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6.         <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.         <title>视频</title>
  8.         <link rel="stylesheet" type="text/css" href="../css/aui.css" />
  9.         <style>
  10.                 .item{
  11.                         position: relative;
  12.                 }
  13.                
  14.                 .item .video-title{
  15.                         text-align: center;
  16.                         width: 100%;
  17.                         color: #ff6600;
  18.                         font-size: 14px;
  19.                 }
  20.                 .item .btn{
  21.                         position: absolute;
  22.                         top: 50%;
  23.                         left: 50%;
  24.                         margin-top:-15% ;
  25.                         margin-left: -10%;
  26.                         width: 20%;
  27.                 }
  28.         </style>
  29. </head>
  30. <body>
  31.         <div class="aui-content">
  32.                 <div class="aui-card-list">
  33.                 <div class="aui-card-list-content-padded aui-border-b aui-border-t">
  34.                     <div class="aui-row aui-row-padded">
  35.                         <div class="aui-col-xs-6 item">
  36.                             <img src="../image/l1.png"/>
  37.                                 <img src="../image/play.png" class="btn" onclick="fnPlayVideo(this)" data-url="http://7o50kb.com2.z0.glb.qiniucdn.com/c1.1.mp4"/>
  38.                                 <div class="video-title aui-ellipsis">第一个视频</div>
  39.                         </div>
  40.                         <div class="aui-col-xs-6 item">
  41.                             <img src="../image/l2.png"/>
  42.                             <img src="../image/play.png" class="btn" onclick="fnPlayVideo(this)" data-url="http://resource.apicloud.com/video/apicloud3.mp4"/>
  43.                             <div class="video-title aui-ellipsis">第二个视频</div>
  44.                         </div>
  45.                     </div>
  46.                 </div>
  47.             </div>
  48.         </div>
  49. </body>
  50. <script type="text/javascript" src="../script/api.js"></script>
  51. <script type="text/javascript">
  52.         /**
  53.          * api初始化
  54.          */
  55.         apiready = function() {
  56. //                引模块(全局变量)
  57.                 neteasePlayer = api.require('neteasePlayer');
  58.         };

  59.         /**
  60.          * 点击播放
  61.          *
  62.          * @param {Object} dom 元素
  63.          */
  64.         function fnPlayVideo(dom) {
  65.                 //获取储存在元素自定义属性中的视频链接、视频标题
  66.                 var url = $api.attr(dom,'data-url');
  67.                 var title = $api.text($api.next(dom));
  68.                 //open
  69.                 neteasePlayer.open({
  70.                         title: title,
  71.                         definition:["高清","标清","流畅"],
  72.                         styles: {
  73.                                 head: {
  74.                                         bg: 'rgba(0,0,0,0.5)',
  75.                                         height: 44,
  76.                                         title: {
  77.                                                 size: 20,
  78.                                                 color: '#FFF',
  79.                                                 width: 500,
  80.                                                 leftMargin: 10
  81.                                         },
  82.                                         backSize: 36,
  83.                                         backImg: 'widget://image/back.png',
  84.                                         definition: {
  85.                                                 bg: 'rgba(0,0,0,0.5)',
  86.                                                 textSize: 16,
  87.                                                 textColor: "#FFF",
  88.                                                 textWidth: 60,
  89.                                                 marginRight: 5
  90.                                         },
  91.                                 },
  92.                                 playCenterBtn: {
  93.                                         size: 44,
  94.                                         playCenterImg: 'widget://image/play.png',
  95.                                         pauseCenterImg: 'widget://image/pause.png',
  96.                                 },
  97.                                 foot: {
  98.                                         bg: 'rgba(0,0,0,0.5)',
  99.                                         height: 44,
  100.                                         playBtn: {
  101.                                                 size: 36,
  102.                                                 playImg: 'widget://image/play.png',
  103.                                                 pauseImg: 'widget://image/pause.png',
  104.                                                 marginLeft: 5
  105.                                         },
  106.                                         currentTimeLabel: {
  107.                                                 textSize: 10,
  108.                                                 textColor: "#FFF",
  109.                                                 textWidth: 50,
  110.                                                 marginLeft: 5
  111.                                         },
  112.                                         seekBar: {
  113.                                                 //            sliderImg:'widget://image/circle.png',
  114.                                                 sliderW: 20,
  115.                                                 sliderH: 20,
  116.                                                 progressColor: '#696969',
  117.                                                 progressSelected: '#76EE00',
  118.                                                 marginLeft: 10,
  119.                                                 marginRight: 10
  120.                                         },
  121.                                         totalTimeLabel: {
  122.                                                 textSize: 10,
  123.                                                 textColor: "#FFF",
  124.                                                 textWidth: 50,
  125.                                                 marginRight: 5
  126.                                         },
  127.                                         voiceBtn: {
  128.                                                 size: 30,
  129.                                                 muteImg: 'widget://img/muteImg.png',
  130.                                                 disMuteImg: 'widget://img/disMuteImg.png',
  131.                                         },
  132.                                         fullscreenBtn: {
  133.                                                 size: 30,
  134.                                                 verticalImg: 'widget://image/vertical.png',
  135.                                                 horizontalImg: 'widget://image/horizontal.png',
  136.                                         }
  137.                                 }
  138.                         },
  139.                         path: url,
  140.                         autoPlay: true
  141.                 }, function(ret, err) {
  142.                         if(ret && ret.eventType == "ready") {
  143.                                 fnSetHardwareDecoder();
  144.                                 fnInitEvent();
  145.                         } else {
  146.                                 alert(JSON.stringify(err));
  147.                         }
  148.                 });
  149.         }
  150.         
  151.         /**
  152.          * 网易云音乐事件监听
  153.          */
  154.         function fnInitEvent(){
  155.                 neteasePlayer.addEventListener(function(ret){
  156.                         console.log(JSON.stringify(ret));
  157.                 });
  158.         };
  159.         
  160.         /**
  161.          * 硬解码状态
  162.          */
  163.         function fnSetHardwareDecoder(){
  164.                 var status = false;
  165.                 var _status = $api.getStorage("hardwareDecoder");
  166.                 if(_status == "open"){
  167.                         status = true;
  168.                 }else{
  169.                         status = false;
  170.                 };
  171.                 //开起硬解码
  172.                 neteasePlayer.setHardwareDecoder({
  173.                     status:status
  174.                 });
  175.         };
  176. </script>
  177. </html>
复制代码
setting.html代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.     <title>设置</title>
  8.     <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
  9.     <style>
  10.     </style>
  11. </head>
  12. <body>
  13.         <div class="aui-content">
  14.                 <ul class="aui-list aui-form-list">
  15.                         <li class="aui-list-item">
  16.                     <div class="aui-list-item-inner">
  17.                         <div class="aui-list-item-title">硬解码</div>
  18.                         <div class="aui-list-item-right">
  19.                             <input id="switch" type="checkbox" class="aui-switch" onclick="switchListener(this)">
  20.                         </div>
  21.                     </div>
  22.                 </li>
  23.         </ul>
  24.         </div>
  25. </body>
  26. <script type="text/javascript" src="../script/api.js"></script>
  27. <script type="text/javascript">
  28.         /**
  29.          * api初始化
  30.          */
  31.         apiready = function (){
  32.                 fnInitData();
  33.         }
  34.         
  35.         /**
  36.          * 初始化页面数据
  37.          */
  38.         function fnInitData(){
  39.                 var status = $api.getStorage("hardwareDecoder");
  40.                 fninitView(status);
  41.         }
  42.         
  43.         /**
  44.          * 初始化页面布局
  45.          *
  46.          * @param {Object} status        硬解码开起状态   open:开起  close/undefined:关闭
  47.          */
  48.         function fninitView(status){
  49.                 if(status == "open"){
  50.                         $api.dom('#switch').checked="checked";
  51.                 }
  52.         };
  53.         
  54.         /**
  55.          * 点击开关切换硬解码状态
  56.          *
  57.          * @param {Object} dom 开关元素
  58.          */
  59.         function switchListener(dom){
  60.                 //获取切换前的状态、根据此状态切换
  61.                 var status = $api.getStorage("hardwareDecoder");
  62.                 if(status == "open"){                        //若开则关
  63.                         fnCloseHardwareDecoder();
  64.                 }else{                                                        //若关则开
  65.                         fnOpenHardwareDecoder();
  66.                 }
  67.         }
  68.         
  69.         /**
  70.          * 打开硬解码操作
  71.          */
  72.         function fnOpenHardwareDecoder(){
  73.                 $api.setStorage("hardwareDecoder","open");
  74.                 fnInitData();
  75.         }
  76.         
  77.         /**
  78.          * 关闭硬解码操作
  79.          */
  80.         function fnCloseHardwareDecoder(){
  81.                 $api.setStorage("hardwareDecoder","close");
  82.                 fnInitData();
  83.         }
  84. </script>
  85. </html>
复制代码


效果图:



代码:

这是我打的测试包

下载链接:http://downloadpkg.apicloud.com/app/download?path=http://7zldgz.com1.z0.glb.clouddn.com/3826ea1cdb85032561ef5fb5df5a2e3c_d

二维码:



本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

主题:
0
帖子:
99
云币:
7081
发表于 2018-1-23 18:55:00 |
小手一抖,金币拿走

主题:
0
帖子:
99
云币:
7081
发表于 2018-1-23 18:55:07 |
感谢分享

老司机

UID:253706

主题:
176
帖子:
16972
云币:
8007
发表于 2018-1-23 19:08:29 |
感谢分享啊,老铁。

职业车手

UID:441392

主题:
33
帖子:
2306
云币:
2775

APICloud粉丝志愿者一周年中秋节女朋友装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章不觉明厉强者王者足球狗捣蛋鬼儿童节快乐

 楼主| 发表于 2018-1-24 15:46:40 |
往事随风 发表于 2018-1-23 18:55
小手一抖,金币拿走

没有金币  哈哈

主题:
12
帖子:
49
云币:
62
发表于 2018-1-24 17:31:09 来自手机 |
压缩包异常

职业车手

UID:441392

主题:
33
帖子:
2306
云币:
2775

APICloud粉丝志愿者一周年中秋节女朋友装逼侠单身狗超人锤子侠SB侠我李白贼6APICloud大会专属勋章不觉明厉强者王者足球狗捣蛋鬼儿童节快乐

 楼主| 发表于 2018-1-25 08:48:49 |

没异常呀。害得我又下载一次。

驾校小白

UID:617190

主题:
0
帖子:
12
云币:
111
发表于 2018-9-6 13:42:36 |
谁有音频处理类的模块?????

主题:
3
帖子:
32
云币:
17
发表于 2020-5-18 19:40:54 |
好贵哦

主题:
0
帖子:
4
云币:
4
发表于 2021-3-5 17:43:07 |
flv放不了
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表