提交 72ddc79a authored 作者: xuyanwei's avatar xuyanwei

换视频插件

上级 26096bb4
......@@ -2,5 +2,6 @@
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"prod"',
BASE_API: '"http://117.78.46.153"'
BASE_API: '"http://yhrs.class.com.cn"'
/*http://yhrs.class.com.cn/wap/index.html#/*/
}
......@@ -36,8 +36,9 @@
<!–windows phone 点击无高光–>
<meta name="msapplication-tap-highlight" content="no">-->
<title>公共就业服务平台</title>
<script src="static/simple-share.js"></script>
<!-- <script src="static/ckplayer/ckplayer.js"></script> -->
<!--<script src="//cdn.jsdelivr.net/npm/xgplayer/browser/index.js" charset="utf-8"></script>
<script src="//cdn.jsdelivr.net/npm/xgplayer-mp4/browser/index.js" charset="utf-8"></script>-->
<!-- <script type="text/javascript" src="./static/ckplayer/ckplayer.js"></script>-->
<!-- <script src="static/vconsole.min.js"></script>
<script src="https://cdn.bootcss.com/vConsole/3.2.2/vconsole.min.js"></script>
<script>var vConsole = new VConsole();</script> -->
......
......@@ -13948,9 +13948,9 @@
"integrity": "sha512-ok+x+1ufLuBT9dfM5P2FcRefwNniQoVwwfBhGa5gLn8NrSTzNah2p4IElMLwzXuKLtyH4yb+z3IsdDef3FOL5A=="
},
"xgplayer": {
"version": "2.8.3",
"resolved": "https://registry.npmjs.org/xgplayer/-/xgplayer-2.8.3.tgz",
"integrity": "sha512-pSxc3HpQZpsG0bE7/rg/NNqfkYh9KmV0FtMjWdQdCTgxtPrGZFsjjIlaU/UDIzSHIZ0ddlchDpp5szCFs5e1dw==",
"version": "2.9.1",
"resolved": "https://registry.npmjs.org/xgplayer/-/xgplayer-2.9.1.tgz",
"integrity": "sha512-tXBSLAb2+NafbGkeKxIKxEiSzlK+2DiNHYRlnk/IAPJulznGqBoGzXzyxtOHVGvnKTeaOCL1HtQauXmVTMMdKA==",
"requires": {
"chalk": "^2.3.2",
"commander": "^2.15.1",
......@@ -13965,6 +13965,22 @@
"request-frame": "^1.5.3"
}
},
"xgplayer-hls.js": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/xgplayer-hls.js/-/xgplayer-hls.js-2.2.3.tgz",
"integrity": "sha512-CFsZanBHHRbqTmqYCFFONk76oWwJwbn+8LK/XkwBBrUrqGPQPmrXfjelGjKDDGfZ+w3xReC1nGom3IpN+lLoaQ==",
"requires": {
"deepmerge": "2.0.1",
"event-emitter": "^0.3.5"
},
"dependencies": {
"deepmerge": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.0.1.tgz",
"integrity": "sha512-VIPwiMJqJ13ZQfaCsIFnp5Me9tnjURiaIFxfz7EH0Ci0dTSQpZtSLrqOicXqEd/z2r+z+Klk9GzmnRsgpgbOsQ=="
}
}
},
"xhr": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/xhr/-/xhr-2.4.0.tgz",
......
......@@ -33,7 +33,8 @@
"vue-video-player": "^5.0.2",
"vuex": "^3.1.2",
"vux": "^2.9.4",
"xgplayer": "^2.8.3"
"xgplayer": "^2.9.1",
"xgplayer-hls.js": "^2.2.3"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
......
......@@ -128,3 +128,10 @@ export function getCollectionListAPI(params) {
params
})
}
// 根据视频id获取路径
export function getFilePathAPI(params) {
return request({
url: `${requestPath.file}/getFilePath?fileName=${params}`,
method: 'get',
})
}
import request from '@/utils/request'
import { requestPath } from '@/utils/global.js'
// 根据视频id获取路径
export function getFilePathAPI(params) {
return request({
url: `${requestPath.file}/getFilePath?fileName=${params}`,
method: 'get',
})
}
// 获取视频详情
export function getVideoDetail(params) {
return request({
url: `${requestPath.resource}/course-library/get/${params}`,
method: 'get',
})
}
// // 查询当前用户最后观看记录
// export function lastVideo(params) {
// return request({
// url: `${requestPath.resource}/video-study-record/get/list`,
// method: 'get',
// params
// })
// }
// 保存视频浏览记录
export function saveRecordVideo(data) {
return request({
url: `${requestPath.resource}/video-study-record/save`,
method: 'post',
data
})
}
\ No newline at end of file
/**
* @Author: skyeGao
* @Email: yyjzp1314@126.com
* @DateTime: 2019-03-29 11:24:39
* @Description: video 配置
*/
export const playerConfig = {
container: '.ckplayerVideo',
variable: 'player',
loaded: 'loadedHandler', //当播放器加载后执行的函数
loop: false, //播放结束是否循环播放
autoplay: true, //是否自动播放
//duration: 500, //设置视频总时间
// cktrack: 'http://front-end.bjcnc.scs.sohucs.com/track-report-sit/ckplayer/material/srt.srt', //字幕文件
// poster: 'material/poster.jpg', //封面图片
/*preview: { //预览图片
file: [
'http://front-end.bjcnc.scs.sohucs.com/track-report-sit/ckplayer/material/mydream_en1800_1010_01.png',
'http://front-end.bjcnc.scs.sohucs.com/track-report-sit/ckplayer/material/mydream_en1800_1010_02.png'
],
scale: 2
},*/
config: '', //指定配置函数
debug: true, //是否开启调试模式
//flashplayer: true, //强制使用flashplayer
drag: 'start', //拖动的属性
seek: 0, //默认跳转的时间
//playbackrate:1,//默认速度的编号,只对html5有效,设置成-1则不显示倍速
//advertisements:'website:ad.json',
//front:'frontFun',//上一集的操作函数
//next:'nextFun',//下一集的操作函数
/****************** 广告部分开始 ******************/
adfront: 'http://www.ckplayer.com/yytf/swf/front001.swf,http://www.ckplayer.com/yytf/swf/front002.swf', //前置广告
adfronttime: '15,15',
adfrontlink: '',
adpause: 'http://www.ckplayer.com/yytf/swf/pause001.swf,http://www.ckplayer.com/yytf/swf/pause002.swf',
adpausetime: '5,5',
adpauselink: '',
adinsert: 'http://www.ckplayer.com/yytf/swf/insert001.swf,http://www.ckplayer.com/yytf/swf/insert002.swf',
adinserttime: '10,10',
adinsertlink: '',
inserttime: '10,80',
adend: 'http://www.ckplayer.com/yytf/swf/end001.swf,http://www.ckplayer.com/yytf/swf/end002.swf',
adendtime: '15,15',
adendlink: '',
/****************** 广告部分结束 ******************/
/*promptSpot: [ //提示点
{
words: '提示点文字01',
time: 30
},
{
words: '提示点文字02',
time: 150
}
],*/
//mobileCkControls:true,//是否在移动端(包括ios)环境中显示控制栏
//live:true,//是否是直播视频,true=直播,false=点播
/*video: [
['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0],
['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0],
['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 10],
['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4', 'video/mp4', '英文超清', 0]
]*/
/*video: [
['http://test16.zhongdianyun.com:8709:8696/file/file/?fileName=aa515010032f48f9adbb3aa41ddb4a5d','video/mp4']
]*/
// video: [],
flashplayer: false, //设置成true则强制使用flashplayer
html5m3u8: true,//是否在pc端环境使用hls播放m3u8
hlsAutoPlay: true,
video: '',
crossorigin: '*',
logo: null
}
\ No newline at end of file
import coursePic from '@/assets/img/default/d-course.png' // 课程
const BASE_URL = process.env.VUE_APP_URL // 全局域名端口
export function getVideo(data){
return `${BASE_URL}/file/${data}/index.m3u8`
}
export function getImg(data){
return (data&&`${BASE_URL}/file/file/?fileName=${data}`)||coursePic
}
\ No newline at end of file
// @import '@/app.scss';
$topHeader: 86px;
$nameHeader: 44px;
$playButton: 50px;
$l1: 172px;
$l2: 60px;
.course-video-page{
overflow: hidden;
.top-header{
height: $topHeader;
line-height: $topHeader;
padding-left: 28px;
background-color: #303134;
display: flex;
align-items: center;
.video-back-btn{
width: 119px;
height: 39px;
display: block;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
font-size:13px;
font-family:MicrosoftYaHei;
font-weight:400;
color:rgba(255,255,255,1);
line-height:24px;
text-shadow:0px -1px 0px rgba(0, 0, 0, 0.4);
}
}
.center-video{
.name-header{
height: $nameHeader;
line-height: $nameHeader;
background-color: #2A2A2A;
span{
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #5474CE;
margin-left: 30px;
}
}
.center-video-con{
font-size: 0px;
}
.left-video-con{
background: #303134;
height: calc(100vh - 86px - 50px - 44px) !important;
.xgplayer{
height: 100% !important;
padding: 0 !important;
}
.playButton{
width: 100%;
height: $playButton;
line-height: $playButton;
text-align: right;
background-color: #171717;
a{
width: 76px;
height: 31px;
line-height: 31px;
text-align: center;
display: inline-block;
margin-right: 16px;
color: #FFFFFF;
font-size: 13px;
background-color: #2C2C2C;
@include border-radius(3px);
i{
color: #fff;
font-size: 15px;
margin-right: 6px;
}
}
}
.no-ckplayerVideo{
height: calc(100vh - 86px - 50px - 44px) !important;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #666;
}
}
.right-video-catalogue{
height: -moz-calc(100vh - #{$topHeader});
height: -webkit-calc(100vh - #{$topHeader});
height: calc(100vh - #{$topHeader});
color: #fff;
background-color: #26262B;
border-bottom: 1px solid #ededed;
.top-course-info{
padding: 10px;
h3{
font-size: 20px;
color: #fff;
margin: 20px 0;
}
.course-info-con{
display: flex;
justify-content: space-between;
.icon{
display: inline-block;
width: 12px;
height: 12px;
margin: 3px 10px 0 0;
vertical-align: text-top;
}
.icon-jiangshi{
background: url('~@/assets/img/detail/detail-teacher.png') center center no-repeat;
background-size: 100% 100%;
}
.text{
display: flex;
flex-direction: column-reverse;
font-size: 14px;
color: #fff;
}
.img{
width: 120px;
height: 90px;
img{
width: 100%;
height: 100%;
}
}
}
}
.bottom-course-catalogue{
.el-header,
.el-main{
padding: 0;
}
h3{
border: 1px solid #323237;
border-left: none;
border-right: none;
margin: 10px 0;
padding: 10px;
span{
font-size: 18px;
padding-bottom: 10px;
border-bottom: 2px solid #5474CE;
}
}
ul{
/*height: 352px;*/
height: -moz-calc(100vh - #{$topHeader} - #{$l1} - #{$l2});
height: -webkit-calc(100vh - #{$topHeader} - #{$l1} - #{$l2});
height: calc(100vh - #{$topHeader} - #{$l1} - #{$l2});
overflow-y: auto;
}
li:nth-child(1){
margin-top: 15px;
}
li{
color: #fff;
padding: 0 15px 0;
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: 400;
display: flex;
justify-content: space-between;
align-items: center;
}
li.active,
li:hover{
background-color: #000000;
color: #5474CE;
.catalogue-item{
.title:before,
.title:after{
background: #000000;
}
}
}
.catalogue-item{
width: 100%;
line-height: 24px;
.title{
text-align: left;
/*@include text-more-ellipsis(1);*/
@include main-text-more-ellipsis(1, $bgColor:#26262B);
max-height: 24px;
/*padding: 5px 0;*/
}
.title.disabled{
color: #808080
}
.info{
text-align: right;
}
}
.icon{
display: inline-block;
width: 12px;
height: 12px;
vertical-align: text-top;
margin-right: 6px;
margin-top: 3px;
}
.icon-bofang{
background: url("~@/assets/img/detail/detail-play.png") center center no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
.icon-suozhu{
background: url("~@/assets/img/detail/detail-lock.png") center center no-repeat;
background-size: 100% 100%;
}
}
}
}
}
\ No newline at end of file
差异被折叠。
import { Message } from 'element-ui'
import Cookies from 'js-cookie'
export function warningMessage(title, duration = 2000) {
Message({
message: title,
type: 'warning',
duration:duration
});
}
export function successMessage(title, duration = 2000) {
Message({
message: title,
type: 'success',
duration:duration
});
}
export function errorMessage(title, duration = 2000) {
Message({
message: title,
type: 'error',
duration:duration
});
}
export function isLogin() {
return Cookies.get('token') ? true:false
}
// 深拷贝
export const deepClone = obj => {
let newObj = Array.isArray(obj) ? [] : {}
if (obj && typeof obj === 'object') {
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
if (obj[key] && typeof obj[key] === 'object') {
newObj[key] = deepClone(obj[key])
}
newObj[key] = obj[key]
}
}
}
return newObj
}
// 判断对象对否有某个元素,有的话返回该对象的值
export const hasOwnPro = function(obj,key){
return obj.hasOwnProperty(key) ? obj[key] : ''
}
差异被折叠。
export const playerConfig= {
id: "mse", // 挂载节点id
playsinline: true, // 是否在线播放
whitelist: [ // 白名单
""
],
url:'',
// url: "http://192.168.2.242:8501/file/2020/03/11/014a51f66a41416b84e2ca58b84665fd/index.m3u8", // 播放地址
// url:'http://192.168.2.242:8501/file/2020/05/09/991423a50f89441d874e6807426e3f39/index.m3u8',
// width: "400", // 宽度
// height: "300", // 高度
autoplay: false, // 自动播放
fluid: true, // 流式布局
useHls:true,
// playbackRate: [0.75, 1, 1.5], // 可选播放速度 [0.5, 0.75, 1, 1.5, 2]
volume: 0.6, // 预设音量 0 ~ 1
// fitVideoSize: 'auto', // 自适应视频内容宽高 'fixWidth' | 'fixHeight' | 'auto
// loop: true, // 循环播放
// videoInit: true, // 初始化显示视频首帧
poster: '' , // 封面图
// defaultPlaybackRate: 1, // 默认播放速度
// rotate: { // 视频旋转按钮配置项
// innerRotate: true, // 只旋转内部video
// clockwise: false // 旋转方向是否为顺时针
// },
// thumbnail: { // 预览
// pic_num: 44,
// width: 160,
// height: 90,
// col: 10,
// row: 10,
// urls: ['./xgplayer-demo-thumbnail-1.jpg','./xgplayer-demo-thumbnail-2.jpg'],
// },
// playNext: { // 下一集
// urlList: [
// 'url1',
// ],
// },
// download: true, //设置download控件显示
cssFullscreen: true, // 网页样式全屏
}
// 计算高度
export const autoHeight = function(height=0) {
return ((window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)-height)
}
......@@ -56,7 +56,7 @@
justify-content: center;
background-size: cover;
h1{
font-family: my-font;
/*font-family: my-font;*/
color: #fff;
font-size: .18rem;
position: absolute;
......@@ -81,7 +81,7 @@
align-items: center;
img{width: .09rem;object-fit: contain}
}
h2{font-family: my-font;
h2{/*font-family: my-font;*/
color: #fff;
font-size: .18rem;
padding-right: .12rem;
......
......@@ -54,7 +54,7 @@
justify-content: center;
background-size: cover;
h1{
font-family: my-font;
/*font-family: my-font;*/
color: #fff;
font-size: .18rem;
position: absolute;
......@@ -72,7 +72,7 @@
justify-content: space-between;
align-items: center;
img{width: .09rem;object-fit: contain}
h2{font-family: my-font;
h2{/*font-family: my-font;*/
color: #fff;
font-size: .18rem;
img{
......
......@@ -33,7 +33,7 @@
justify-content: center;
background-size: cover;
h1{
font-family: my-font;
/*font-family: my-font;*/
color: #fff;
font-size: .18rem;
position: absolute;
......@@ -58,7 +58,7 @@
align-items: center;
img{width: .09rem;object-fit: contain}
}
h2{font-family: my-font;
h2{/*font-family: my-font;*/
color: #fff;
font-size: .18rem;
padding-right: .12rem;
......
......@@ -40,6 +40,7 @@ require('video.js/dist/video-js.css');
require('vue-video-player/src/custom-theme.css');
Vue.use(VideoPlayer)
/*import './.xgplayer/skin/index.js';*/
import valert from './components/alertMess/index.js'
Vue.use(valert);
// import Vconsole from 'vconsole';
......
......@@ -104,7 +104,7 @@
line-height: .6rem;
padding-top: .16rem;
font-weight: normal;
font-family: my-font;
/*font-family: my-font;*/
}
h2{
height: .2rem;
......@@ -130,7 +130,7 @@
}
.cont2{
h1{color: #333333;font-size: .15rem;font-family: my-font;height: .5rem; line-height: .5rem;padding-top: .3rem;padding-left: .12rem}
h1{color: #333333;font-size: .15rem;/*font-family: my-font;*/height: .5rem; line-height: .5rem;padding-top: .3rem;padding-left: .12rem}
}
ul{
width: 3.51rem;
......@@ -151,7 +151,7 @@
line-height: .38rem;
margin-left: .15rem;
color:#fff;
font-family: my-font;
/*font-family: my-font;*/
}
@for $i from 1 through 6 {
.color-div#{$i}{
......
......@@ -95,7 +95,7 @@
text-shadow: .03rem .02rem .03rem rgba(0, 0, 0, .4);
height: .28rem;
line-height: .28rem;
font-family: my-font;
/*font-family: my-font;*/
}
h2:after {
......@@ -116,7 +116,7 @@
align-items: center;
height: .2rem;
margin-top: .22rem;
font-family: my-font;
/*font-family: my-font;*/
img {
width: .05rem;
height: .06rem;
......
......@@ -27,7 +27,7 @@
<button @click="phone!=''&&phoneCode!=''&&login()" :style="{background:phone==''||phoneCode==''?'#C0BFC5':''}">
登录
</button>
<p>登录表示您同意<span>阅见人社会员注册协议》</span></p>
<p>登录表示您同意<span>《会员注册协议》</span></p>
</div>
</div>
</template>
......
......@@ -103,6 +103,7 @@
width: 100%;
height: 100%;
background: #f2f2f2;
overflow: auto;
.info{
width: 100%;
height: 1.35rem;
......@@ -120,7 +121,7 @@
}
.name{
h1{
font-family: my-font;
/*font-family: my-font;*/
color:#fff;
font-weight: bold;
font-size: .17rem;
......@@ -197,7 +198,7 @@ list-style: none;
.cont3{
width: 3.45rem;
height: .39rem;
margin: .3rem auto 0;
margin: .8rem auto 1.1rem;
background: #E3E3E3;
color: #333;
border-radius: .19rem;
......
......@@ -3,33 +3,115 @@
<div class="play">
<comHeader @collectionV="collectionV" :isColl="isColl"></comHeader>
<div class="video">
<video :src="imgLink($route.query.videoAndPdf)" controls></video><!--http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4-->
<!--<video :src="imgLink($route.query.videoAndPdf)" controls></video>--><!--http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4-->
<div id="mse"></div>
</div>
</div>
</template>
<script>
import 'xgplayer'
/*import HlsJsPlayer from 'xgplayer-hls.js';*/
import HlsJsPlayer from 'xgplayer-hls.js';
import { playerConfig } from '../../components/CourseVideo/xiguaConfig';
import { Toast,Icon } from 'vant';
import { getCollectioncheckAPI,addCollectionAPI,delCollectionAPI} from '@/api/xywApi';
import { getCollectioncheckAPI,addCollectionAPI,delCollectionAPI,getFilePathAPI} from '@/api/xywApi';
import {getVideo} from '../../utils/global';
export default {
name: 'HelloWorld',
data() {
return {
isColl:false,
playerConfig: playerConfig,// 西瓜视频的相关配置
player:null,
}
},
created() {
this.getCollectioncheck();
this.palyVideo();
},
watch: {},
methods: {
getVideo(data){
console.log(1111,process.env)
return `${process.env.BASE_API}/file/${data}/index.m3u8`
},
// 播放视频
palyVideo(record) {
getFilePathAPI(this.$route.query.videoAndPdf).then(res=>{
if(res.data.code == 0){
let startIndex=res.data.data.indexOf('.mp4');
let file=res.data.data.slice(0,startIndex);
console.log('返回路径',this.getVideo(file));
let player = new HlsJsPlayer({
id: 'mse',
url: this.getVideo(file),
autoplay: true,
playsinline: true,
height: 'auto',
width: '100%'
});
}else{
}
})
},
getCollectioncheck(){
getCollectioncheckAPI({
videoId:this.$route.query.id,
goodsType:6,
}).then(res=>{
if(res.data.status){
/*let player = new Player({
id: 'mse',
autoplay: true,
volume: 0.3,
url:'http://117.78.46.153/file/file/?fileName=9232ae7493554d78b621a3fb495373e8&isOnLine=true',
poster: "//s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
playsinline: true,
thumbnail: {
pic_num: 44,
width: 160,
height: 90,
col: 10,
row: 10,
urls: ['//s3.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-thumbnail.jpg'],
},
danmu: {
comments: [
{
duration: 15000,
id: '1',
start: 3000,
txt: '长弹幕长弹幕长弹幕长弹幕长弹幕',
style: { //弹幕自定义样式
color: '#ff9500',
fontSize: '20px',
border: 'solid 1px #ff9500',
borderRadius: '50px',
padding: '5px 11px',
backgroundColor: 'rgba(255, 255, 255, 0.1)'
}
}
],
area: {
start: 0,
end: 1
}
},
height: window.innerHeight,
width: window.innerWidth,
whitelist: ['']
});*/
this.isColl=res.data.data;
}else{
Toast.fail('获取失败');
......
......@@ -45,7 +45,7 @@
total:0,
loading: false,
finished: false,
}
},
created() {
......@@ -105,7 +105,7 @@
line-height: .6rem;
padding-top: .16rem;
font-weight: normal;
font-family: my-font;
/*font-family: my-font;*/
}
h2{
height: .2rem;
......@@ -131,7 +131,7 @@
}
.cont2{
h1{color: #333333;font-size: .15rem;font-family: my-font;height: .5rem; line-height: .5rem;padding-top: .3rem;padding-left: .12rem}
h1{color: #333333;font-size: .15rem;/*font-family: my-font;*/height: .5rem; line-height: .5rem;padding-top: .3rem;padding-left: .12rem}
}
ul{
width: 3.51rem;
......@@ -153,7 +153,7 @@
line-height: .38rem;
margin-left: .15rem;
color:#fff;
font-family: my-font;
/*font-family: my-font;*/
}
@for $i from 1 through 6 {
.color-div#{$i}{
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论