Skip to content

B
biz.qingxiao.com
Commit 452c7fe9 authored by wangxuelai's avatar wangxuelai
Browse files
Options

''

parent 012b7c67
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 7 deletions
index.html
View file @ 452c7fe9
...@@ -17,6 +17,6 @@ ...@@ -17,6 +17,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script src="dist/main.js?1574827384999" charset="utf-8"></script> <script src="dist/main.js?1574833367343" charset="utf-8"></script>
</body> </body>
</html> </html>
\ No newline at end of file
src/components/UploadCourseware.js
View file @ 452c7fe9
...@@ -69,6 +69,19 @@ class UploadCourseware extends React.Component { ...@@ -69,6 +69,19 @@ class UploadCourseware extends React.Component {
}); });
delCourseware(); delCourseware();
} }
reLoadVideoPoster = (src) => {
console.log(src, 'src');
const that = this;
const img = new Image();
img.src = videoPoster(src);
img.onload = function () {
document.getElementById('videoposter').setAttribute('src', videoPoster(src));
};
img.onerror = function () {
document.getElementById('videoposter').setAttribute('src', `${__IMGCDN__}course/video_default.png`);
that.reLoadVideoPoster(src);
};
}
render() { render() {
const { const {
visible, visible,
...@@ -131,7 +144,7 @@ class UploadCourseware extends React.Component { ...@@ -131,7 +144,7 @@ class UploadCourseware extends React.Component {
} }
{info.mediaType == 2 && {info.mediaType == 2 &&
<div className={pageStyle.videobox}> <div className={pageStyle.videobox}>
<img className={pageStyle.videoImg} alt="" src={videoPoster(info.src)} /> <img className={pageStyle.videoImg} alt="" id="videoposter" src={videoPoster(info.src)} onError={() => this.reLoadVideoPoster(info.src)} />
<div className={pageStyle.videoplay}> <div className={pageStyle.videoplay}>
<img className={pageStyle.videoplayicon} src={`${__IMGCDN__}smallplayicon.png`} alt="" /> <img className={pageStyle.videoplayicon} src={`${__IMGCDN__}smallplayicon.png`} alt="" />
</div> </div>
...@@ -169,20 +182,27 @@ class UploadCourseware extends React.Component { ...@@ -169,20 +182,27 @@ class UploadCourseware extends React.Component {
<div className={pageStyle.uploaddesc}>MOV/MP4格式，大小≦**MB</div> <div className={pageStyle.uploaddesc}>MOV/MP4格式，大小≦**MB</div>
</div> </div>
<div className={pageStyle.right}> <div className={pageStyle.right}>
<div className={pageStyle.btn} onClick={chooseFromCourseMateria}> <div className={pageStyle.btn} onClick={chooseFromCourseMateria} style={{ marginRight: '10px' }}>
<img src={`${__IMGCDN__}course/check.png`} alt="" className={`${pageStyle.btnicon} ${pageStyle.leftbtnicon}`} /> <img src={`${__IMGCDN__}course/check.png`} alt="" className={`${pageStyle.btnicon} ${pageStyle.leftbtnicon}`} />
<span>素材库</span> <span>素材库</span>
</div> </div>
<div className={pageStyle.btn}>
<img src={`${__IMGCDN__}course/uploadImg.png`} alt="" className={`${pageStyle.btnicon} ${pageStyle.rightbtnicon}`} />
<span>上传</span>
<input
type="file"
className={pageStyle.uploadInput}
accept=".ppt, .pptx, image/*, application/vnd.ms-powerpoint, video/mp4, application/pdf, audio/*"
onChange={this.uploadCourseMateria}
id="uploadcourseware"
/>
</div>
{info.src && {info.src &&
<div className={pageStyle.delbtn} onClick={this.delCourseware}> <div className={pageStyle.delbtn} onClick={this.delCourseware}>
<Icon type="delete" className={pageStyle.delIcon} /> <Icon type="delete" className={pageStyle.delIcon} />
<span className={pageStyle.delText}>删除</span> <span className={pageStyle.delText}>删除</span>
</div> </div>
} }
{/* <div className={pageStyle.btn}>
<img src={`${__IMGCDN__}course/uploadImg.png`} alt="" className={`${pageStyle.btnicon} ${pageStyle.rightbtnicon}`} />
<span>上传</span>
</div> */}
</div> </div>
</div> </div>
</Modal> </Modal>
......
src/components/UploadCourseware.less
View file @ 452c7fe9
...@@ -73,6 +73,16 @@ ...@@ -73,6 +73,16 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
position: relative;
.uploadInput {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
opacity: 0;
}
.btnicon { .btnicon {
display: block; display: block;
&.leftbtnicon { &.leftbtnicon {
...@@ -137,6 +147,9 @@ ...@@ -137,6 +147,9 @@
width: 100%; width: 100%;
height: 254px; height: 254px;
position: relative; position: relative;
display: flex;
align-items: center;
justify-content: center;
.videoImg { .videoImg {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
......
src/models/coursemateria.js
View file @ 452c7fe9
...@@ -173,11 +173,27 @@ export default { ...@@ -173,11 +173,27 @@ export default {
break; break;
case 2: // 视频 case 2: // 视频
duration = yield call(getVideoDuration, file); duration = yield call(getVideoDuration, file);
if (duration == 0) {
yield call(uploadMateriaLoading);
message.error('视频格式不支持,请上传MP4格式的文件', 2);
if (successCallBack && (typeof successCallBack == 'function')) {
successCallBack();
}
return;
}
ajax = uploader.uploadVideoSignature; ajax = uploader.uploadVideoSignature;
params = { type: 1, token: userInfo.token, schoolId: sid }; params = { type: 1, token: userInfo.token, schoolId: sid };
break; break;
case 3: // 录音 case 3: // 录音
duration = yield call(getAudioDuration, file); duration = yield call(getAudioDuration, file);
if (duration == 0) {
yield call(uploadMateriaLoading);
message.error('音频格式不支持,重新上传', 2);
if (successCallBack && (typeof successCallBack == 'function')) {
successCallBack();
}
return;
}
ajax = uploader.uploadVideoSignature; ajax = uploader.uploadVideoSignature;
params = { type: 2, token: userInfo.token, schoolId: sid }; params = { type: 2, token: userInfo.token, schoolId: sid };
break; break;
......
src/utils/index.js
View file @ 452c7fe9
...@@ -839,6 +839,15 @@ function getAudioDuration(file) { ...@@ -839,6 +839,15 @@ function getAudioDuration(file) {
duration = 0; duration = 0;
}, false); }, false);
}, false); }, false);
audioElement.addEventListener('error', (event) => {
// eslint-disable-next-line prefer-destructuring
duration = audioElement.duration;
resolve(0);
// callback(duration);
audioElement.removeEventListener('loadedmetadata', (event) => {
duration = 0;
}, false);
}, false);
}); });
} }
function getVideoDuration(file) { function getVideoDuration(file) {
...@@ -848,6 +857,7 @@ function getVideoDuration(file) { ...@@ -848,6 +857,7 @@ function getVideoDuration(file) {
videoElement.id = 'videoElement'; videoElement.id = 'videoElement';
videoElement.src = url; videoElement.src = url;
let duration; let duration;
// document.body.appendChild(videoElement);
videoElement.addEventListener('loadedmetadata', (event) => { videoElement.addEventListener('loadedmetadata', (event) => {
// eslint-disable-next-line prefer-destructuring // eslint-disable-next-line prefer-destructuring
duration = videoElement.duration; duration = videoElement.duration;
...@@ -857,6 +867,15 @@ function getVideoDuration(file) { ...@@ -857,6 +867,15 @@ function getVideoDuration(file) {
duration = 0; duration = 0;
}, false); }, false);
}, false); }, false);
videoElement.addEventListener('error', (event) => {
// eslint-disable-next-line prefer-destructuring
// duration = videoElement.duration;
resolve(0);
// callback(duration);
videoElement.removeEventListener('loadedmetadata', (event) => {
duration = 0;
}, false);
}, false);
}); });
} }
function voiceTimeFormat(time) { function voiceTimeFormat(time) {
......
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