Skip to content

B
biz.qingxiao.com
Commit 47a4d1c5 authored by baixian's avatar baixian
Browse files
Options

优化

parent 0974bbd1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 3033 additions and 1964 deletions
index.html
View file @ 47a4d1c5
......@@ -18,5 +18,5 @@
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/dist/main.80d239.js"></script></body>
<script type="text/javascript" src="/dist/main.1af2e7.js"></script></body>
</html>
\ No newline at end of file
src/pages/liveclass/components/VideoListPlay.js 0 → 100644
View file @ 47a4d1c5
import React from 'react';
import { Icon, Button } from 'antd';
import videojs from 'video.js';
import playlist from 'videojs-playlist';
import playlistUi from 'videojs-playlist-ui';
import componentStyle from './VideoListPlay.less';
import { imagify, ossVideofy } from '../../../utils/index';
let myVideo;
let curr = 0;
class VideoListPlay 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',
}; //
const source = document.getElementById('source');
// 视频列表播放 列表格式 [{name:'111',sources:[{src:'', type: 'video/mp4',}]}]
if (videoList.length > 0) {
source.setAttribute('src', videoList[0].sources[0].src);
myVideo = videojs('myVideo', options, (onPlayerReady) => {
myVideo.play();
myVideo.on('ended', () => {
if (curr >= videoList.length) {
curr = 0;
}
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() {
const { lookVideoPoster, closeVideoPlay } = this.props;
return (
<div className={`${componentStyle.VideoPlayBox} VideoPlayBox`}>
<Icon type="close-circle" className={componentStyle.closeIcon} onClick={closeVideoPlay} />
<div className={componentStyle.videoitem}>
<video
id="myVideo"
controls
preload="metadata"
className="video-js"
style={{
width: '100%',
height: '90%',
}}
>
<source id="source" />
</video>
<div id="playList" className="vjs-playlist"></div>
</div>
</div>
);
}
}
export default VideoListPlay;
src/pages/liveclass/components/VideoListPlay.less 0 → 100644
View file @ 47a4d1c5
This diff is collapsed.
src/pages/liveclass/components/VideoPlay.js
View file @ 47a4d1c5
import React from 'react';
import { Icon, Button } from 'antd';
import videojs from 'video.js';
import playlist from 'videojs-playlist';
import playlistUi from 'videojs-playlist-ui';
import { Icon } from 'antd';
import { Player } from 'video-react';
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',
}; //
const source = document.getElementById('source');
// 视频列表播放 列表格式 [{name:'111',sources:[{src:'', type: 'video/mp4',}]}]
if (videoList.length > 0) {
source.setAttribute('src', videoList[0].sources[0].src);
myVideo = videojs('myVideo', options, (onPlayerReady) => {
myVideo.play();
myVideo.on('ended', () => {
if (curr >= videoList.length) {
curr = 0;
}
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
componentWillUpdate() {
}
cancelCropper = () => {
}
sureCropper = () => {
}
rotateLeft = () => {
}
rotateRight = () => {
}
closeImgPreview = () => {
}
render() {
const { lookVideoPoster, closeVideoPlay } = this.props;
const { src, closeVideoPlay } = this.props;
return (
<div className={`${componentStyle.VideoPlayBox} VideoPlayBox`}>
<Icon type="close-circle" className={componentStyle.closeIcon} onClick={closeVideoPlay} />
<div className={componentStyle.videoitem}>
<video
id="myVideo"
controls
preload="metadata"
className="video-js"
style={{
width: '100%',
height: '90%',
}}
>
<source id="source" />
</video>
<div id="playList" className="vjs-playlist"></div>
</div>
<Player className={componentStyle.videoitem}>
<source src={src} />
</Player>
</div>
);
}
......
src/pages/liveclass/index.js
View file @ 47a4d1c5
......@@ -243,58 +243,15 @@ class LiveClass extends React.Component {
goLook = (record) => {
const { dispatch } = this.props;
console.log(record, 'record');
if (record.replay_url.url == '') {
message.warning('转码中，请稍后', 0.5);
return;
}
dispatch({
type: 'liveclass/updateState',
payload: {
lookVideoShow: true,
// 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',
},
],
},
],
lookVideoUrl: record.replay_url.url,
},
});
}
......@@ -491,9 +448,8 @@ class LiveClass extends React.Component {
{
lookVideoShow &&
<VideoPlay
videoList={lookVideoUrl}
src={lookVideoUrl}
closeVideoPlay={this.closeVideoPlay}
poster={lookVideoPoster}
/>
}
</div>
......@@ -516,7 +472,6 @@ function mapStateToProps(state) {
previewQrcode,
lookVideoShow,
lookVideoUrl,
lookVideoPoster,
} = state.liveclass;
const {
guideStep,
......@@ -540,7 +495,6 @@ function mapStateToProps(state) {
previewQrcode,
lookVideoShow,
lookVideoUrl,
lookVideoPoster,
};
}
export default connect(mapStateToProps)(LiveClassForm);
......
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