Skip to content

B
biz.qingxiao.com
Commit 0974bbd1 authored by baixian's avatar baixian
Browse files
Options

优化

parent ba77125c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 580 additions and 19 deletions
package-lock.json
View file @ 0974bbd1
......@@ -1954,7 +1954,8 @@
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/assert-plus/download/assert-plus-1.0.0.tgz",
"integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
"dev": true
"dev": true,
"optional": true
},
"assign-symbols": {
"version": "1.0.0",
......@@ -4395,6 +4396,7 @@
"resolved": "https://registry.npm.taobao.org/combined-stream/download/combined-stream-1.0.8.tgz",
"integrity": "sha1-w9RaizT9cwYxoRCoolIGgrMdWn8=",
"dev": true,
"optional": true,
"requires": {
"delayed-stream": "~1.0.0"
}
......@@ -5373,7 +5375,8 @@
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/delayed-stream/download/delayed-stream-1.0.0.tgz",
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
"dev": true
"dev": true,
"optional": true
},
"delegate": {
"version": "3.2.0",
......@@ -6868,7 +6871,8 @@
"version": "1.3.0",
"resolved": "https://registry.npm.taobao.org/extsprintf/download/extsprintf-1.3.0.tgz",
"integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
"dev": true
"dev": true,
"optional": true
},
"fast-deep-equal": {
"version": "2.0.1",
......@@ -9146,7 +9150,8 @@
"version": "0.1.1",
"resolved": "https://registry.npm.taobao.org/jsbn/download/jsbn-0.1.1.tgz",
"integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
"dev": true
"dev": true,
"optional": true
},
"jsesc": {
"version": "2.5.2",
......@@ -13946,7 +13951,8 @@
"version": "0.14.5",
"resolved": "https://registry.npm.taobao.org/tweetnacl/download/tweetnacl-0.14.5.tgz",
"integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
"dev": true
"dev": true,
"optional": true
},
"type-check": {
"version": "0.3.2",
......@@ -14449,6 +14455,24 @@
"resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
"integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
},
"videojs-playlist": {
"version": "4.3.1",
"resolved": "https://registry.npm.taobao.org/videojs-playlist/download/videojs-playlist-4.3.1.tgz",
"integrity": "sha1-tWIfoA4TMTj3nEEn2t8jmdlHGaw=",
"requires": {
"global": "^4.3.2",
"video.js": "^6 || ^7"
}
},
"videojs-playlist-ui": {
"version": "3.7.0",
"resolved": "https://registry.npm.taobao.org/videojs-playlist-ui/download/videojs-playlist-ui-3.7.0.tgz",
"integrity": "sha1-nk5CqTHclorvuN4/p93pVJuIxUk=",
"requires": {
"global": "^4.4.0",
"video.js": "^6 || ^7"
}
},
"videojs-vtt.js": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.14.1.tgz",
......
package.json
View file @ 0974bbd1
......@@ -59,6 +59,8 @@
"react-slick": "^0.25.2",
"video-react": "^0.14.1",
"video.js": "^7.6.6",
"videojs-playlist": "^4.3.1",
"videojs-playlist-ui": "^3.7.0",
"xlsx": "^0.15.0"
},
"devDependencies": {
......
src/pages/liveclass/components/VideoPlay.js
View file @ 0974bbd1
import React from 'react';
import { Icon, Button } from 'antd';
import Videojs from 'video.js';
import videojs from 'video.js';
import playlist from 'videojs-playlist';
import playlistUi from 'videojs-playlist-ui';
import componentStyle from './VideoPlay.less';
import { imagify, ossVideofy } from '../../../utils/index';
let myVideo;
let curr = 0;
class VideoPlay extends React.Component {
constructor(props) {
super(props);
this.state = {
};
videojs.addLanguage('zh-CN', {
Play: '播放',
Pause: '暂停',
'Current Time': '当前时间',
Duration: '时长',
'Remaining Time': '剩余时间',
'Stream Type': '媒体流类型',
LIVE: '直播',
Loaded: '加载完毕',
Progress: '进度',
Fullscreen: '全屏',
'Non-Fullscreen': '退出全屏',
Mute: '静音',
Unmute: '取消静音',
'Playback Rate': '播放速度',
Subtitles: '字幕',
'subtitles off': '关闭字幕',
Captions: '内嵌字幕',
'captions off': '关闭内嵌字幕',
Chapters: '节目段落',
'Close Modal Dialog': '关闭弹窗',
Descriptions: '描述',
'descriptions off': '关闭描述',
'Audio Track': '音轨',
'You aborted the media playback': '视频播放被终止',
'A network error caused the media download to fail part-way.': '网络错误导致视频下载中途失败。',
'The media could not be loaded, either because the server or network failed or because the format is not supported.': '视频因格式不支持或者服务器或网络的问题无法加载。',
'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.': '由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。',
'No compatible source was found for this media.': '无法找到此视频兼容的源。',
'The media is encrypted and we do not have the keys to decrypt it.': '视频已加密，无法解密。',
'Play Video': '播放视频',
Close: '关闭',
'Modal Window': '弹窗',
'This is a modal window': '这是一个弹窗',
'This modal can be closed by pressing the Escape key or activating the close button.': '可以按ESC按键或启用关闭按钮来关闭此弹窗。',
', opens captions settings dialog': ', 开启标题设置弹窗',
', opens subtitles settings dialog': ', 开启字幕设置弹窗',
', opens descriptions settings dialog': ', 开启描述设置弹窗',
', selected': ', 选择',
'captions settings': '字幕设定',
'Audio Player': '音频播放器',
'Video Player': '视频播放器',
Replay: '重播',
'Progress Bar': '进度条',
'Volume Level': '音量',
'subtitles settings': '字幕设定',
'descriptions settings': '描述设定',
Text: '文字',
White: '白',
Black: '黑',
Red: '红',
Green: '绿',
Blue: '蓝',
Yellow: '黄',
Magenta: '紫红',
Cyan: '青',
Background: '背景',
Window: '视窗',
Transparent: '透明',
'Semi-Transparent': '半透明',
Opaque: '不透明',
'Font Size': '字体尺寸',
'Text Edge Style': '字体边缘样式',
None: '无',
Raised: '浮雕',
Depressed: '压低',
Uniform: '均匀',
Dropshadow: '下阴影',
'Font Family': '字体库',
'Proportional Sans-Serif': '比例无细体',
'Monospace Sans-Serif': '单间隔无细体',
'Proportional Serif': '比例细体',
'Monospace Serif': '单间隔细体',
Casual: '舒适',
Script: '手写体',
'Small Caps': '小型大写字体',
Reset: '重置',
'restore all settings to the default values': '恢复全部设定至预设值',
Done: '完成',
'Caption Settings Dialog': '字幕设定视窗',
'Beginning of dialog window. Escape will cancel and close the window.': '开始对话视窗。离开会取消及关闭视窗',
'End of dialog window.': '结束对话视窗',
'Now Playing': '正在播放',
'Up Next': '下一个播放',
'Untitled Video': '无标题视频',
});
}
componentDidMount() {
const { videoList, poster } = this.props;
const options = {
playbackRates: [0.5, 1, 1.5, 2, 4, 8, 16],
poster: imagify(poster),
language: 'zh-CN',
}; //
let curr = 0;
const source = document.getElementById('source');
// 视频列表播放 列表格式 [{name:'111',sources:[{src:'', type: 'video/mp4',}]}]
if (videoList.length > 0) {
source.setAttribute('src', videoList[0]);
myVideo = Videojs('myVideo', options, (onPlayerReady) => {
source.setAttribute('src', videoList[0].sources[0].src);
myVideo = videojs('myVideo', options, (onPlayerReady) => {
myVideo.play();
// eslint-disable-next-line func-names
myVideo.on('ended', () => {
if (curr >= videoList.length) {
curr = 0;
}
myVideo.src(videoList[curr]);
myVideo.src(videoList[curr].sources[0].src);
myVideo.load();
myVideo.play();
curr++;
});
});
curr++;
myVideo.playlist(videoList);
myVideo.playlistUi();
}
}
componentWillUnmount() {
curr = 0;
myVideo.dispose(); // 销毁videojs 不然下次打开是原生的Video
}
render() {
......@@ -47,16 +140,16 @@ class VideoPlay extends React.Component {
<video
id="myVideo"
controls
preload="auto"
preload="metadata"
className="video-js"
style={{
width: '100%',
height: 330,
height: '90%',
}}
>
<source id="source" />
</video>
<div id="playList" className="vjs-playlist"></div>
</div>
</div>
);
......
src/pages/liveclass/components/VideoPlay.less
View file @ 0974bbd1
......@@ -14,7 +14,29 @@
max-height: 100%!important;
position: relative;
max-width: 100%;
height: 80%;
height: 100%;
padding-top: 5%;
:global {
.video-js{
float:left;
width: 70% !important;
height: 100%;
}
.vjs-playlist{
float:left;
width: 30%;
height: 90%;
}
.vjs-playlist-item{
border: 1px solid #FFFFFF;
}
.vjs-playlist .vjs-selected{
border: 1px solid #00FF00;
}
.vjs-playlist .vjs-selected img{
opacity: .5;
}
}
}
.closeIcon {
position: absolute;
......@@ -1607,4 +1629,243 @@
background: 0 0
}
}
}
\ No newline at end of file
.vjs-playlist {
padding: 0;
background-color: #1a1a1a;
color: #fff;
list-style-type: none
}
.vjs-playlist img {
display: block;
height: auto;
width: auto
}
.vjs-playlist .vjs-playlist-item-list {
position: relative;
margin: 0;
padding: 0;
list-style: none
}
.vjs-playlist .vjs-playlist-item {
position: relative;
cursor: pointer;
overflow: hidden
}
.vjs-playlist .vjs-playlist-thumbnail-placeholder {
background: #303030
}
.vjs-playlist .vjs-playlist-now-playing-text {
display: none;
position: absolute;
top: 0;
left: 0;
padding-left: 2px;
margin: .8rem
}
.vjs-playlist .vjs-playlist-duration {
position: absolute;
top: .5rem;
left: .5rem;
padding: 2px 5px 3px;
margin-left: 2px;
background-color: rgba(26, 26, 26, 0.8)
}
.vjs-playlist .vjs-playlist-title-container {
position: absolute;
bottom: 0;
box-sizing: border-box;
width: 100%;
padding: .5rem .8rem;
text-shadow: 1px 1px 2px black, -1px 1px 2px black, 1px -1px 2px black, -1px -1px 2px black
}
.vjs-playlist .vjs-playlist-name {
display: block;
max-height: 2.5em;
padding: 0 0 4px 2px;
font-style: normal;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 20px
}
.vjs-playlist .vjs-playlist-description {
margin: 0;
text-overflow: ellipsis;
overflow: hidden
}
.vjs-playlist .vjs-up-next-text {
display: none;
padding: .1rem 2px;
font-size: .8em;
text-transform: uppercase
}
.vjs-playlist .vjs-up-next .vjs-up-next-text {
display: block
}
.vjs-playlist .vjs-selected {
background-color: #141a21
}
.vjs-playlist .vjs-selected img {
opacity: .2
}
.vjs-playlist .vjs-selected .vjs-playlist-duration {
display: none
}
.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text {
display: block
}
.vjs-playlist .vjs-selected .vjs-playlist-title-container {
text-shadow: none
}
.vjs-playlist-vertical {
overflow-x: hidden;
overflow-y: auto
}
.vjs-playlist-vertical img {
width: 100%;
min-height: 54px
}
.vjs-playlist-vertical .vjs-playlist-item {
margin-bottom: 5px
}
.vjs-playlist-vertical .vjs-playlist-thumbnail {
display: block;
width: 100%
}
.vjs-playlist-vertical .vjs-playlist-thumbnail-placeholder {
height: 100px
}
.vjs-playlist-horizontal {
overflow-x: auto;
overflow-y: hidden
}
.vjs-playlist-horizontal img {
min-width: 100px;
height: 100%
}
.vjs-playlist-horizontal .vjs-playlist-item-list {
height: 100%;
white-space: nowrap
}
.vjs-playlist-horizontal .vjs-playlist-item {
display: inline-block;
height: 100%;
margin-right: 5px
}
.vjs-playlist-horizontal .vjs-playlist-thumbnail {
display: block;
height: 100%
}
.vjs-playlist-horizontal .vjs-playlist-thumbnail-placeholder {
height: 100%;
width: 180px
}
.vjs-playlist.vjs-ad-playing {
overflow: hidden
}
.vjs-playlist.vjs-ad-playing.vjs-csspointerevents {
pointer-events: none;
overflow: auto
}
.vjs-playlist.vjs-ad-playing.vjs-csspointerevents .vjs-playlist-ad-overlay {
pointer-events: auto
}
.vjs-playlist.vjs-ad-playing .vjs-playlist-ad-overlay {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #1a1a1a;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
background-color: rgba(0, 0, 0, 0.5)
}
.vjs-playlist {
font-size: 14px
}
.vjs-playlist .vjs-playlist-description {
height: 42px;
line-height: 21px
}
.vjs-mouse.vjs-playlist {
font-size: 15px
}
.vjs-mouse.vjs-playlist .vjs-playlist-description {
height: 45px;
line-height: 23px
}
@media (min-width: 600px) {
.vjs-mouse.vjs-playlist {
font-size: 17px
}
.vjs-mouse.vjs-playlist .vjs-playlist-description {
height: 51px;
line-height: 26px
}
.vjs-playlist .vjs-playlist-name {
line-height: 22px
}
}
@media (max-width: 520px) {
.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text, .vjs-playlist .vjs-up-next .vjs-up-next-text {
display: none
}
.vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text, .vjs-mouse.vjs-playlist .vjs-up-next .vjs-up-next-text {
display: none
}
}
@media (min-width: 521px) {
.vjs-playlist img {
min-height: 85px
}
}
@media (max-width: 750px) {
.vjs-playlist .vjs-playlist-duration {
display: none
}
}
}
src/pages/liveclass/index.js
View file @ 0974bbd1
......@@ -247,8 +247,54 @@ class LiveClass extends React.Component {
type: 'liveclass/updateState',
payload: {
lookVideoShow: true,
lookVideoUrl: record.replay_url ? record.replay_url : [],
// lookVideoUrl: record.replay_url ? record.replay_url : [],
lookVideoPoster: record.cover,
lookVideoUrl: [
{
name: '1111111',
sources: [
{
src: 'https://www.shangjiadao.com/video/video1.mp4',
type: 'video/mp4',
},
],
}, {
name: '22222222',
sources: [
{
src: 'https://www.shangjiadao.com/video/video2.mp4',
type: 'video/mp4',
},
],
},
{
name: '333',
sources: [
{
src: 'https://www.shangjiadao.com/video/video3.mp4',
type: 'video/mp4',
},
],
},
{
name: '444',
sources: [
{
src: 'https://www.shangjiadao.com/video/video4.mp4',
type: 'video/mp4',
},
],
},
{
name: '5555',
sources: [
{
src: 'https://www.shangjiadao.com/video/video5.mp4',
type: 'video/mp4',
},
],
},
],
},
});
}
......
yarn.lock
View file @ 0974bbd1
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment