mp3 player added

conf/nginx_machete.conf

@@ -11,7 +11,7 @@ server {
     root /var/www/machete/www;
     index index.php index.html;
 
-    location ~ /.*/([^\/]*\.(gif|jpg|jpeg|png|webp|bmp|swf|js|css|ico|mp4|ts))$ {
+    location ~ .*\/([^\/]*\.(gif|jpg|jpeg|png|webp|bmp|swf|js|css|ico|mp4|mov|mp3|ts)) {
         # support file download
         if ($arg_download) {
             add_header Content-disposition "attachment; filename=$1";

themes/beauty/controller/SiteController.php

@@ -590,7 +590,53 @@ Class SiteController extends Controller {
     }
 
     //TODO: 增加mp3播放器，以及mp3时长获取
+    public function actionAudioplayer() {
+        $videoUrl = $this->get('url', '');
+        $videoId = $this->get('id', '');
+
+        $cateId = $this->get('pid', '');
+        $cacheParentDataId = $this->get('cid', '');
+        $page = $this->get('page', 1);
+        $pageSize = $this->get('limit', 24);
+
+        if (empty($videoUrl) || empty($videoId) || empty($cateId) || empty($cacheParentDataId)) {
+            throw new Exception("缺少参数！", 403);
+        }
+
+        $arr = parse_url($videoUrl);
+        $videoFilename = basename($arr['path']);
+
+        //增加文件后缀格式检查，区分：mp4, mov, m3u8
+        $videoExtension = pathinfo($arr['path'], PATHINFO_EXTENSION);
+        $videoSourceType = Html::getMediaSourceType($videoExtension);
+
+
+        //获取联系方式
+        $maxScanDeep = 0;       //最大扫描目录级数
+        $cacheKey = $this->getCacheKey('root', 'readme', $maxScanDeep);
+        $readmeFile = Common::getCacheFromFile($cacheKey);
+
+        //底部版权申明配置支持
+        $copyright = '';
+        if (!empty($readmeFile['copyright'])) {
+            $copyright = $readmeFile['copyright'];
+        }
+
+        $isAdminIp = Common::isAdminIp($this->getUserIp());        //判断是否拥有管理权限
+
+
+        $pageTitle = "正在播放：{$videoFilename}";
+        $this->layout = 'player';
+        $viewName = 'mp3player';
+        $params = compact(
+            'videoUrl', 'videoId', 'videoFilename',
+            'cateId', 'cacheParentDataId', 'page', 'pageSize',
+            'copyright', 'isAdminIp', 'videoExtension', 'videoSourceType'
+        );
+        return $this->render($viewName, $params, $pageTitle);
+    }
 
+    //视频播放器
     public function actionPlayer() {
         $videoUrl = $this->get('url', '');
         $videoId = $this->get('id', '');

themes/beauty/views/site/index.php

@@ -402,24 +402,20 @@ eof;
                 }else if (in_array($file['extension'], $audioExts)) {       //输出音乐
                     $title = !empty($file['title']) ? $file['title'] : $file['filename'];
                     $videoUrl = urlencode($file['path']);
-                    $linkUrl = "/site/player?id={$file['id']}&pid={$file['pid']}&cid={$viewData['cacheDataId']}&url={$videoUrl}";
+                    $linkUrl = "/site/audioplayer?id={$file['id']}&pid={$file['pid']}&cid={$viewData['cacheDataId']}&url={$videoUrl}";
-                    if ($viewData['showType'] == 'video') {
+                    if ($viewData['showType'] == 'audio') {
                         $linkUrl .= "&page={$viewData['page']}&limit={$viewData['pageSize']}";
                     }
 
                     echo <<<eof
-<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
+<div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2 audio-list-item">
-    <a href="{$linkUrl}" target="_blank" class="bor_radius" title="{$title} - {$file['filename']}">
+    <a href="{$linkUrl}" target="_blank" class="bor_radius vercenter" title="{$title} - {$file['filename']}">
-        <img src="/img/beauty/video_snap.jpg" class="bor_radius im_img video-poster" id="poster_{$file['id']}"
+        <img src="/img/beauty/audio_icon.jpeg" class="bor_radius im_img video-poster" id="poster_{$file['id']}"
             data-video-id="{$file['id']}"
             data-video-url="{$file['path']}"
             alt="{$file['filename']}">
-        <div class="im_img_title">
+        <span class="title">{$title}</span>
-            <span class="right-bottom">
+        <!--img src="/img/video-play.svg" class="playbtn hide" alt="video play button"-->
-                {$title}
-            </span>
-        </div>
-        <img src="/img/video-play.svg" class="playbtn hide" alt="video play button">
         <span class="duration">00:00:00</span>
     </a>
 </div>

themes/beauty/views/site/mp3player.php

@@ -0,0 +1,86 @@
+<?php
+//MP3播放器
+
+?>
+<!-- 顶部导航栏模块 -->
+<nav class="navbar navbar-default navbar-fixed-top navbarJS">
+    <div class="container-fluid">
+        <!-- Brand and toggle get grouped for better mobile display navbar-inverse-->
+        <div class="navbar-header">
+            <div class="navbar-toggle">
+                <img class="svg icon1 svgimg lampJS verMiddle" src="/img/beauty/buld.svg" alt="点击关灯/开灯" title="点击关灯/开灯">
+            </div>
+
+            <a class="navbar-brand" href="/">
+                <span class="verMiddle">正在播放</span>
+            </a>
+            <span class="navbar-text videotitle"><?php echo $viewData['videoFilename']; ?></span>
+        </div>
+
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+            <div class="nb_right nav navbar-nav navbar-right hidden-xs">
+                <img class="svg icon1 svgimg iconr2 lampJS verMiddle" src="/img/beauty/buld.svg" alt="点击关灯/开灯" title="点击关灯/开灯">
+            </div>
+        </div><!-- /.navbar-collapse -->
+    </div><!-- /.container-fluid -->
+</nav>
+
+
+<div class="row">
+    <div class="col col-md-8">
+        <div class="videoplayer">
+            <video
+                data-id="<?php echo $viewData['videoId']; ?>"
+                data-screenshot-start="<?php echo FSC::$app['config']['screenshot_start']; ?>"
+                class="video-js vjs-big-play-centered vjs-fluid vjs-16-9"
+                controls
+                playsinline
+                poster="/img/beauty/audio_bg.jpg"
+                data-src="<?php echo $viewData['videoUrl']; ?>"
+                data-type="<?php echo $viewData['videoSourceType']; ?>"
+                id="my-player">
+            </video>
+            <div class="text-right mt-2 mr-1">
+                <a class="btn btn-default" href="<?php echo $viewData['videoUrl']; ?>&download=1">
+                    <img src="/img/download.png" alt="download icon" width="20">
+                    下载音乐
+                </a>
+            </div>
+        </div>
+    </div>
+    <div class="col col-md-4 morevideos">
+        <hr class="visible-xs">
+        <div class="btn_autoplay text_dark">
+            自动播放：
+            <div class="btn-group" role="group">
+                <button class="btn btn-default btn-xs autoplay_disabled">关闭</button>
+                <button class="btn btn-primary btn-xs autoplay_enabled">开启</button>
+            </div>
+        </div>
+
+        <div
+            data-type="audio"
+            data-id="<?php echo $viewData['videoId']; ?>"
+            data-pid="<?php echo $viewData['cateId']; ?>"
+            data-cid="<?php echo $viewData['cacheParentDataId']; ?>"
+            data-page="<?php echo $viewData['page']; ?>"
+            data-page-size="<?php echo $viewData['pageSize']; ?>"
+            class="othervideos audiolist"><div class="ml-1">...</div></div>
+    </div>
+</div>
+
+<script type="text/template" id="template_video_item">
+    <div class="col-xs-12 mb-1 audio-item">
+        <a href="{videoUrl}" title="{title}">
+            <img src="/img/beauty/audio_icon.jpeg?v1" class="bor_radius video-poster" id="poster_{videoId}"
+                width="60" height="60"
+                data-video-id="{videoId}"
+                data-video-url="{videoPath}"
+                alt="">
+            <span class="duration">00:00:00</span>
+            <span class="title">{title}</span>
+            <!--img src="/img/video-play.svg" class="playbtn hide" alt="video play button"-->
+        </a>
+    </div>
+</script>

www/css/beauty.css

@@ -141,9 +141,19 @@ a:link{text-decoration:none}
 .duration{position:absolute;left:5px;bottom:5px;background-color:#222;padding:0 3px;opacity:0.7;border-radius:3px;font-size:12px;color:#FFF}
 .video_previewer{display:none;position:fixed;right:4px;bottom:4px;width:200px;height:112px;overflow:hidden;z-index:1000}
 
-.othervideos{max-height:560px;overflow-y:auto;background-color:#EEE;padding:4px}
+.othervideos{max-height:560px;overflow-y:auto;padding:4px}
 .btn_autoplay{margin:5px}
 
+.audio-list-item .im_img_title{background:none}
+.audio-list-item .im_img{width:80%;height:88%;margin:0 auto}
+.audio-list-item .title{color:#444;text-wrap:nowrap;white-space:nowrap;text-overflow:ellipsis}
+.audio-list-item .duration{bottom:16.5%;left:50%;width:50px;margin-left:-25px}
+.audio-item{background:rgba(7, 7, 7, .1);padding:5px;border-radius:5px}
+.audio-item a{display:block}
+.audio-item img{float:left;width:60px;height:60px}
+.audio-item .title{display:block;margin-left:70px}
+.audio-item .duration{max-width:60px;overflow:hidden;margin-left:6px}
+
 .mt-3{margin-top:3em}
 .mt-2{margin-top:2em}
 .mt-1{margin-top:1em}

www/js/beauty.js

@@ -478,6 +478,13 @@ if ($('#pr-player').length > 0 && typeof(videojs) != 'undefined') {
         myPlayer.pause();
 
         if (typeof(mc_video_id) != 'undefined' && mc_video_id) {
+            var snapshotImg = '';
+
+            //区分media类型，视频生成快照，音乐只获取时长
+            var mediaType = myPlayer.currentType();
+            if (mediaType.indexOf('mp3') > -1) {
+                console.log('media type', mediaType);
+            }else {
                 var height = myPlayer.videoHeight(), width = myPlayer.videoWidth(),
                     aspect = height / width;
                 var canvas = document.createElement('canvas');
@@ -489,7 +496,9 @@ if ($('#pr-player').length > 0 && typeof(videojs) != 'undefined') {
                 var ctx = canvas.getContext('2d');
                 ctx.drawImage( video, 0, 0, canvas.width, canvas.height );
 
-            var snapshotImg = canvas.toDataURL('image/jpeg');
+                snapshotImg = canvas.toDataURL('image/jpeg');
+            }
+
             var duration = myPlayer.duration();
 
             //更新视频封面图和视频时长
@@ -502,6 +511,10 @@ if ($('#pr-player').length > 0 && typeof(videojs) != 'undefined') {
                     duration: duration,
                     snapshot: snapshotImg
                 });
+            }else if (duration) {       //保存音乐时长
+                saveVideoMeta(mc_video_id, {
+                    duration: duration
+                });
             }
 
             mc_video_id = '';           //reset
@@ -522,7 +535,7 @@ var getVideoMetaAndShowIt = function(videoId, videoUrl) {
         }
     }).done(function(data) {
         if (data.code != 1) {
-            console.warn(data.msg);
+            console.warn('no meta data', data.msg);
             noSnapVideos.push({id: videoId, url: videoUrl});
         }else {
             $('#poster_'+videoId).attr('src', data.meta.snapshot);
@@ -607,7 +620,15 @@ if ($('#my-player').length > 0 && typeof(videojs) != 'undefined') {
             screenshot_start = 1000;
         }
 
+        //区分media类型，视频生成快照，音乐只获取时长
+        var mediaType = myPlayer.currentType();
+        if (mediaType.indexOf('mp3') > -1) {
+            saveVideoMeta($('video.vjs-tech').attr('data-id'), {
+                duration: myPlayer.duration()
+            });
+        }else {
             setTimeout(takeScreenshot, screenshot_start);
+        }
     });
 
     //自动播放
@@ -618,6 +639,8 @@ if ($('#my-player').length > 0 && typeof(videojs) != 'undefined') {
             src: videoSrc,
             type: videoType
         });
+        myPlayer.muted(false);
+        myPlayer.play();
     }catch(err) {
         console.error('自动播放视频失败！', err);
     }
@@ -671,7 +694,11 @@ if ($('#my-player').length > 0 && typeof(videojs) != 'undefined') {
     //加载更多视频
     var currentPage = $('.othervideos').attr('data-page'),
         currentPageSize = $('.othervideos').attr('data-page-size'),
-        currentVideoId = $('.othervideos').attr('data-id');
+        currentVideoId = $('.othervideos').attr('data-id'),
+        currentMediaType = $('.othervideos').attr('data-type');
+    if (!currentMediaType) {
+        currentMediaType = 'video';
+    }
     var callback_loadNextPage = null;
     var getOtherVideos = function() {
         if (_noMoreVideos) {return false;}
@@ -682,8 +709,8 @@ if ($('#my-player').length > 0 && typeof(videojs) != 'undefined') {
             params = {
                 id: cateId,
                 cid: cacheId,
-                show: 'video',
+                show: currentMediaType,
-                dataType: 'video',
+                dataType: currentMediaType,
                 page: currentPage,
                 limit: currentPageSize
             };
@@ -707,6 +734,20 @@ if ($('#my-player').length > 0 && typeof(videojs) != 'undefined') {
                 if (callback_loadNextPage) {
                     callback_loadNextPage(data.videos);
                 }
+            }else if (typeof(data.audios) != 'undefined' && data.audios.length > 0) {
+                moreVideos = data.audios;
+                $('.othervideos').html(renderVideos(videoId, data.audios));
+                setTimeout(function() {
+                    $('.othervideos .video-poster').each(function(index, el) {
+                        var videoId = $(el).attr('data-video-id'),
+                            videoUrl = $(el).attr('data-video-url');
+                        getVideoMetaAndShowIt(videoId, videoUrl);
+                    });
+                }, 50);
+
+                if (callback_loadNextPage) {
+                    callback_loadNextPage(data.audios);
+                }
             }else {
                 if (currentPage > 1) {
                     currentPage = 1;        //重新从第一页循环播放