Browse Source

视频播放

liting2017 6 years ago
parent
commit
819404f46e

BIN
img/indedImg/kj_no.png


BIN
img/indedImg/kj_yes.png


BIN
img/indedImg/qq_no.png


BIN
img/indedImg/qq_yes.png


BIN
img/indedImg/share.png


BIN
img/indedImg/xl_no.png


BIN
img/indedImg/xl_yes.png


+ 1 - 1
src/css/video.css

@@ -27,7 +27,7 @@ body {
     height: 220px;
     z-index: 11;
     cursor: pointer;
-    background: url(../../img/fac/videoBj_03.jpg)no-repeat;
+    /* background: url(../../img/fac/videoBj_03.jpg)no-repeat; */
     background-size: 100% 100%;
 }
 

+ 248 - 0
src/css/videoDetail.css

@@ -0,0 +1,248 @@
+body{
+    background: #fff;
+ 
+}
+.videoList::-webkit-scrollbar-track
+{
+    background-color: #F5F5F5;
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.52);
+}
+/*定义滚动条高宽及背景*/
+.videoList::-webkit-scrollbar
+{
+    width: 6px;
+    background-color: rgba(0, 0, 0, 0.84);
+}
+/*定义滚动条*/
+.videoList::-webkit-scrollbar-thumb
+{
+    background-color: #888585;
+    border-radius: 10px;
+}
+.videoBody{
+    width: 100%;
+    background: #262626;
+    overflow: hidden;
+}
+.videoBody .videoCenter{
+    width: 1200px;
+    background: #000;
+    margin: 0 auto;
+    overflow: hidden;
+}
+.videoBody .videoCenter .videoPlay{
+    width: 900px;
+    float: left;
+    height: 560px;
+}
+.videoBody .videoCenter .videoPlay #videoDe{
+    width:900px;
+}
+.videoList{
+    padding: 20px;
+    width: 300px;
+    float: right;
+    box-sizing: border-box;
+    color: #fff;
+    height: 558px;
+    overflow-y: auto;
+}
+.videoList li img{
+    width: 90px;
+    height: 90px;
+    display: inline-block;
+    float: left;
+    clear: both;
+    overflow: hidden;
+}
+.videoList ul {
+    margin-top: 20px;
+}
+.videoList li {
+    cursor: pointer;
+    overflow: hidden;
+    clear: both;
+    margin-bottom: 15px;
+}
+.videoList li.active .txt h4,.videoList li.active .txt p{
+    color:#0289df;
+}
+
+.videoList li .txt{
+    float: right;
+    width: 140px;
+    padding: 14px;
+    color: #fff;
+    padding-left: 0
+}
+.videoList h3{
+    font-weight: normal;
+    color: #fff;
+    font-size: 24px;
+    padding-bottom:10px; 
+}
+.videoList li .txt h4{
+    font-size: 16px;
+    font-weight: normal;
+    overflow: hidden;
+    white-space:nowrap; 
+    text-overflow:ellipsis; 
+    -o-text-overflow:ellipsis;
+}
+.videoList li .txt p{
+    font-size: 14px;
+    margin-top: 10px;
+    overflow: hidden;
+    display: -webkit-box;              
+    text-overflow: ellipsis;            
+    -webkit-box-orient: vertical;       
+    -webkit-line-clamp:2;
+}
+.share{
+    clear: both;
+    height: 50px;
+    line-height: 50px;
+    padding-left: 28px;
+    position: relative;
+    z-index: 10;
+}
+.share div{
+    float: left;
+}
+.share ul{
+    position: absolute;
+    left: 140px;
+    height: 40px;
+    width:140px;
+    transition: all .2s ease-in-out;
+    background: #fff;
+    display: flex;
+    display: -webkit-flex;
+    justify-content: space-around;
+    border-radius: 4px;
+    padding: 0 15px;
+    z-index: -1;
+    opacity: 0;
+}
+.share ul::before{
+    content: '';
+    position: absolute;
+    width: 10px;
+    color: #fff;
+    height: 10px;
+    background: #fff;
+    display: inline-block;
+    transform: rotate(45deg);
+    left: -5px;
+    top: 18px;
+    z-index:-1;
+}
+.share ul.active{
+    left: 110px;
+    opacity: 1;
+    z-index: 30;
+    transition: all .3s ease-in
+}
+.share ul.active::before{
+    z-index: 30;
+}
+.share ul li{
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    margin-top: 5px;
+}
+.share ul .qqHy{
+    background: url(../../img/indedImg/qq_no.png)no-repeat;
+    background-size:100% 100%; 
+}
+.share ul .qqHy:hover{
+    background: url(../../img/indedImg/qq_yes.png)no-repeat;
+    background-size:100% 100%; 
+}
+.share ul .qqKj:hover{
+    background: url(../../img/indedImg/kj_yes.png)no-repeat;
+    background-size:100% 100%; 
+}
+.share ul .qqKj{
+    background: url(../../img/indedImg/kj_no.png)no-repeat;
+    background-size:100% 100%; 
+}
+.share ul .xlWb:hover{
+    background: url(../../img/indedImg/xl_yes.png)no-repeat;
+    background-size:100% 100%; 
+}
+.share ul .xlWb{
+    background: url(../../img/indedImg/xl_no.png)no-repeat;
+    background-size:100% 100%; 
+}
+.pub_fix {
+    z-index: 9999;
+}
+.share div>img{
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    margin-right: 10px;
+    vertical-align: middle;
+    margin-top: -3px;
+}
+.share span{
+    display: inline-block;
+    line-break: 50px;
+    color: #999999;
+    cursor: pointer;
+}
+.share span:hover{
+    color: #fff;
+}
+.videoBody h2{
+    width: 1200px;
+    font-weight: normal;
+    font-size:30px;
+    color: #ffffff;
+    margin: 20px auto 40px; 
+} 
+.summary{
+    width: 1200px;
+    margin: 58px auto 100px;
+}
+.summary h4{
+    font-size: 30px;
+    color: #333333;
+    margin-bottom:28px; 
+    font-weight: normal
+}
+.summary p{
+    font-size: 24px;
+    color: #666666;
+    text-align: justify;
+    margin-bottom: 20px;
+}
+footer{
+    display: block;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+ 29 - 9
src/js/video.js

@@ -14,8 +14,24 @@ $(function () {
         thePageLength = 1,
         noLength = `<div class="noLength"></div>`;
     init();
-
+    //获取参数
+    function getRequest() {
+        var url = window.location.search; //获取url中"?"符后的字串
+        var theRequest = new Object();
+        if (url.indexOf("?") != -1) {
+            var str = url.substr(1),
+            strs = str.split("&");
+            for (var i = 0; i < strs.length; i++) {
+                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
+            }
+        }
+        return theRequest;
+    };
     function init() {
+        if(getRequest().name){
+            name=unescape(getRequest().name);
+            $('.demandSearch').val(name)
+        };
         pages();
         inpFun();
         loadDate();
@@ -41,7 +57,8 @@ $(function () {
                 pageNo: pageNo || 1,
                 pageSize: 10,
                 name: name,
-                status: 1
+                status: 1,
+                transcoding:2
             },
             success: function (data) {
                 if (data.error && data.error.length) {
@@ -59,6 +76,7 @@ $(function () {
                                                     <span></span>
                                                 </div> 
                                                 <input type="hidden" value="${item.url||''}">
+                                                <input type="hidden" class='videoId' value="${item.id||''}">
                                             </div>
                                             <div class="txt">
                                                 <h3>${item.name}</h3>
@@ -120,13 +138,15 @@ $(function () {
                 return false;
             }
             nutt = $(this).index();
-            let urls = $(this).find('input').val();
-            videoHtml = `<source src="http://118.190.205.7:8000${urls}" type="video/mp4">`;
-            $('.videoPlay').show(100);
-            $('.videoPlay').addClass('active');
-            $('#videoAt').html(videoHtml);
-            let videoNew = document.getElementById('videoAt');
-            videoNew.load();
+            let urls = $(this).find('.videoId').val();
+            window.location.href=globalConfig.context+'/protal/videoDetail?id='+urls;
+            //let urls = $(this).find('input').val();
+            // videoHtml = `<source src="http://118.190.205.7:8000${urls}" type="video/mp4">`;
+            // $('.videoPlay').show(100);
+            // $('.videoPlay').addClass('active');
+            // $('#videoAt').html(videoHtml);
+            // let videoNew = document.getElementById('videoAt');
+            // videoNew.load();
         })
     }
     videoCz();

+ 77 - 0
src/js/videoDetail.js

@@ -0,0 +1,77 @@
+import 'css/newMenu/public.css';
+import 'css/newMenu/header.css'
+import 'css/search.css';
+import '../css/videoDetail.css';
+import './public.js';
+
+$(function(){
+    "use strict";
+    init();
+    function init(){
+        share();
+        search();
+    }
+    //分享
+    function share(){
+        $('.share div>span').hover(function(){
+            $('.share ul').show(100).addClass('active');
+        })
+        $('.share').mouseleave(function(){
+            $(this).find('ul').hide(100).removeClass('active')
+        })
+        //好友
+        document.querySelector('.qqHy').onclick=function(){
+            let title = $('.videoList li.active .txt h4').text(),
+                img=$('.videoList li.active img').attr('src');
+                shareQQ_friend(title, window.location.href, img)
+        }; 
+        //qq
+        document.querySelector('.qqKj').onclick=function(){
+            let title = $('.videoList li.active .txt h4').text(),
+                img=$('.videoList li.active img').attr('src');
+            shareToQq(title, window.location.href, img)
+        };
+        //微博
+        document.querySelector('.xlWb').onclick=function(){
+            let title = $('.videoList li.active .txt h4').text(),
+            img=$('.videoList li.active img').attr('src');
+            shareToXl(title,window.location.href,img)
+        };
+    }
+    //搜索
+    function search(){
+        $('.searchBtn').click(function(){
+            let val = $('.demandSearch').val();
+            window.location.href= globalConfig.context+'/portal/video.html?name='+escape(val);
+        })
+    }
+
+    //防止下载
+	$('#videoDe').hover(function(){
+		document.oncontextmenu=function(e){
+			return false
+		}
+	},function(){
+		document.oncontextmenu=function(e){
+		}
+    })
+    //分享
+    function shareToQq(title, url, picurl) {
+        var shareqqzonestring = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=' + encodeURIComponent(title) + '&url=' +
+        encodeURIComponent(url) + '&pics=' + encodeURIComponent(picurl)+'&title='+title;
+        window.open(shareqqzonestring);
+    }
+    //微博
+    function shareToXl(title,url,picurl){
+        var sharesinastring='http://v.t.sina.com.cn/share/share.php?title='+title+'&url='+url+'&content=utf-8&sourceUrl='+url+'&pic='+picurl;
+        window.open(sharesinastring);
+    }
+    //qq好友
+    function shareQQ_friend(_title,_url,picurl){
+        var _shareUrl = 'https://connect.qq.com/widget/shareqq/iframe_index.html?';
+            _shareUrl += 'url=' + encodeURIComponent(_url);   //分享的链接
+            _shareUrl += '&title=' + encodeURIComponent(_title);     //分享的标题
+            _shareUrl+='&pics=' + encodeURIComponent(picurl)
+        window.open(_shareUrl,'_blank');
+    }
+})

+ 1 - 1
template/video.html

@@ -65,7 +65,7 @@
 				<span class="videoPre">播放上一个</span>
 				<span class="videoNext">播放下一个</span>
 				<div class="videoList">
-					<video id="videoAt" autoplay>
+					<video id="videoAt" controls='true' contenteditable="false">
 						<source src="http://118.190.205.7:8000/Pear-Demo-Yosemite_National_Park.mp4 " type="video/mp4">
 					</video>
 				</div>

File diff suppressed because it is too large
+ 88 - 0
template/videoDetail.html


+ 6 - 0
webpack.config.js

@@ -481,6 +481,12 @@ module.exports = (function () {
             template: './template/video.html',
             chunks: ['newMenu/video', 'vendors']
         }),
+        new HtmlWebpackPlugin({
+            title: '技淘视频',
+            filename: 'html/newMenu/videoDetail.html',
+            template: './template/videoDetail.html',
+            chunks: ['newMenu/videoDetail', 'vendors']
+        }),
     ];
     if (!isDev) {
         //这个使用uglifyJs压缩你的js代码

+ 8 - 3
webpack/entry.config.js

@@ -47,6 +47,7 @@ module.exports = {
         'newMenu/Invitation': './src/js/newMenu/loading/Invitation.js',
         'newMenu/invRegister': './src/js/newMenu/loading/invRegister.js',
         'newMenu/video': './src/js/video.js',
+        'newMenu/videoDetail': './src/js/videoDetail.js',
     },
     watch: {
         'index': ['webpack-dev-server/client?http://192.168.0.188', // WebpackDevServer host and port
@@ -224,8 +225,12 @@ module.exports = {
             './src/js/newMenu/loading/invRegister.js'
         ],
         'newMenu/video': ['webpack-dev-server/client?http://192.168.0.188', // WebpackDevServer host and port
-        'webpack/hot/only-dev-server',
-        './src/js/video.js'
-    ],
+            'webpack/hot/only-dev-server',
+            './src/js/video.js'
+        ],
+        'newMenu/videoDetail': ['webpack-dev-server/client?http://192.168.0.188', // WebpackDevServer host and port
+            'webpack/hot/only-dev-server',
+            './src/js/videoDetail.js'
+        ],
     }
 };