fix fly file play bug

public/react/package.json

@@ -78,6 +78,7 @@
     "react-cookies": "^0.1.1",
     "react-dev-utils": "^5.0.0",
     "react-dom": "^16.9.0",
+    "react-flv-player": "^1.0.9",
     "react-hot-loader": "^4.0.0",
     "react-infinite-scroller": "^1.2.4",
     "react-loadable": "^5.3.1",

public/react/src/modules/courses/Video/Video.js

@@ -1,12 +1,13 @@
-import React,{ Component } from "react";
-import { Input , Pagination } from 'antd';
-import { NoneData ,ActionBtn } from 'educoder';
+import React, { Component } from "react";
+import { Input, Pagination } from 'antd';
+import { NoneData, ActionBtn } from 'educoder';
 
 import VideoUploadList from '../../user/usersInfo/video/VideoUploadList';
 import VideoInReviewItem from '../../user/usersInfo/video/VideoInReviewItem';
 import HeadlessModal from '../../user/usersInfo/common/HeadlessModal';
 import EditVideoModal from '../../user/usersInfo/video/EditVideoModal'
 import ClipboardJS from 'clipboard'
+import VideoPanel from './video-play'
 
 import './video.css';
 import '../../user/usersInfo/video/InfosVideo.css'
@@ -15,39 +16,38 @@ import axios from 'axios';
 const DEFAULT_VIDEO_WIDTH_IN_MD = "90%" // 400
 const DEFAULT_VIDEO_HEIGHT_IN_MD = "55%" // 400
 
-const videoEl = null;
 let _clipboard = null;
 
-class Video extends Component{
-  constructor(props){
+class Video extends Component {
+  constructor(props) {
     super(props);
-    this.state={
-      videos:undefined,
-      count:0,
-      page:1,
+    this.state = {
+      videos: undefined,
+      count: 0,
+      page: 1,
 
-      videoId:undefined,
-      videoVisible:false,
-      visible:false
+      videoId: undefined,
+      videoVisible: false,
+      visible: false
     }
   }
 
   // 编辑的弹框visible
-  setVisible=(flag)=>{
+  setVisible = (flag) => {
     this.setState({
-      visible:flag
+      visible: flag
     })
   }
 
-  setVideoVisible=(flag)=>{
+  setVideoVisible = (flag) => {
 
     this.setState({
-      videoVisible:flag
+      videoVisible: flag
     })
     if (flag === false) {
       if (_clipboard) {
         this.setState({
-          videoId:undefined
+          videoId: undefined
         })
         _clipboard.listener.destroy();
         _clipboard = null;
@@ -68,13 +68,13 @@ class Video extends Component{
 
 
   // 编辑成功后回调的方法
-  editSuccess=()=>{
+  editSuccess = () => {
     this.props.showNotification("视频名称修改成功!");
-    const { listFunc , page } = this.props;
+    const { listFunc, page } = this.props;
     listFunc && listFunc(page);
   }
 
-  onEditVideo=(item)=>{
+  onEditVideo = (item) => {
     let videoId = {
       videoId: item.id,
       title: item.title
@@ -85,7 +85,7 @@ class Video extends Component{
     this.setVisible(true);
   }
 
-  onMaskClick=(item)=> {
+  onMaskClick = (item) => {
     let videoId = {
       videoId: item.id,
       title: item.title,
@@ -99,15 +99,15 @@ class Video extends Component{
   }
 
 
-  setVideoVisible=(flag)=>{
+  setVideoVisible = (flag) => {
 
     this.setState({
-      videoVisible:flag
+      videoVisible: flag
     })
     if (flag === false) {
       if (_clipboard) {
         this.setState({
-          videoId:undefined
+          videoId: undefined
         })
         _clipboard.listener.destroy();
         _clipboard = null;
@@ -127,31 +127,31 @@ class Video extends Component{
 
   }
 
-  getCopyText = (file_url, cover_url)=>{
+  getCopyText = (file_url, cover_url) => {
     return `<video src="${file_url}" controls="true" controlslist="nodownload" width="${DEFAULT_VIDEO_WIDTH_IN_MD}" height="${DEFAULT_VIDEO_HEIGHT_IN_MD}" poster="${cover_url}">您的浏览器不支持 video 标签。</video>`
   }
 
   // 删除事件
-  deleteVideo=(item)=>{
+  deleteVideo = (item) => {
     this.props.confirm({
       content: '该视频将被删除，不可恢复',
-      subContent:'是否确认删除?',
+      subContent: '是否确认删除?',
 
       onOk: () => {
-        const CourseId=this.props.match.params.coursesId;
+        const CourseId = this.props.match.params.coursesId;
         const url = `/courses/${CourseId}/delete_course_video.json`;
-        axios.delete(url,{
-          params:{
-            video_id:item.id
+        axios.delete(url, {
+          params: {
+            video_id: item.id
           }
-        }).then(result=>{
-          if(result){
+        }).then(result => {
+          if (result) {
             this.props.showNotification(`删除成功!`);
             this.props.updataleftNavfun();
-            const { listFunc , page } = this.props;
+            const { listFunc, page } = this.props;
             listFunc && listFunc(page);
           }
-        }).catch(error=>{
+        }).catch(error => {
           console.log(error);
         })
       },
@@ -161,18 +161,18 @@ class Video extends Component{
     });
   }
 
-  render(){
-    const { visible , videoVisible , videoId } = this.state;
-    const CourseId=this.props.match.params.coursesId;
-    const login=this.props.user&&this.props.user.login;
+  render() {
+    const { visible, videoVisible, videoId } = this.state;
+    const CourseId = this.props.match.params.coursesId;
+    const login = this.props.user && this.props.user.login;
     const _inputValue = videoId && this.getCopyText(videoId.file_url, videoId.cover_url);
 
-    const { admin , is_teacher ,business , user_id} = this.props.user;
+    const { admin, is_teacher, business, user_id } = this.props.user;
 
-    const { videos , upload , uploadVideo , videoData , changePage ,pageSize ,page } = this.props;
+    const { videos, upload, uploadVideo, videoData, changePage, pageSize, page } = this.props;
 
     const operation = admin || business || (is_teacher && this.props.checkIfProfessionalCertification())
-    return(
+    return (
       <div>
         <EditVideoModal {...this.props} visible={visible} setVisible={this.setVisible}
           editSuccess={this.editSuccess}
@@ -184,15 +184,7 @@ class Video extends Component{
           className="showVideoModal"
           width={800 - 1}
         >
-            {
-              videoId &&
-              <video
-                autoplay="true"
-                ref={videoEl}
-                src={videoId.file_url} controls="true" controlslist="nodownload">
-                您的浏览器不支持 video 标签。
-              </video>
-            }
+          {videoId && <VideoPanel src={videoId.file_url} />}
 
           <div className="df copyLine">
             <Input value={_inputValue}
@@ -204,7 +196,7 @@ class Video extends Component{
         <div className="videoPanel">
           {
             upload ?
-            <VideoUploadList {...this.props} flag={true} CourseId={CourseId} CourseUser={login} successFunc={()=>uploadVideo()}></VideoUploadList>
+              <VideoUploadList {...this.props} flag={true} CourseId={CourseId} CourseUser={login} successFunc={() => uploadVideo()}></VideoUploadList>
               :
               <React.Fragment>
                 {
@@ -213,8 +205,8 @@ class Video extends Component{
                       <p className="font-grey-9 mt20 mb20 pl5">共 <span className="color-orange">{videoData && videoData.count}</span> 个视频</p>
                       <div className="videoContent">
                         {
-                    videos.map((item,key)=>{
-                      return(
+                          videos.map((item, key) => {
+                            return (
                               <VideoInReviewItem
                                 {...this.props}
 
@@ -234,14 +226,14 @@ class Video extends Component{
                     </React.Fragment>
                     :
                     <div className="edu-back-white">
-                  <NoneData style={{width: '100%'}}></NoneData>
+                      <NoneData style={{ width: '100%' }}></NoneData>
                     </div>
                 }
 
                 {
                   videoData && videoData.count > pageSize &&
                   <div className="mt30 mb50 edu-txt-center">
-                  <Pagination showQuickJumper total={videoData.count} current={page} pageSize={pageSize} onChange={(page)=>changePage(page,'video')}></Pagination>
+                    <Pagination showQuickJumper total={videoData.count} current={page} pageSize={pageSize} onChange={(page) => changePage(page, 'video')}></Pagination>
                   </div>
                 }
               </React.Fragment>

public/react/src/modules/courses/Video/video-play.jsx

@@ -0,0 +1,18 @@
+import React, { Fragment } from 'react'
+import { ReactFlvPlayer } from 'react-flv-player'
+
+export default ({ src }) => {
+  const suf = src.split('.').pop()
+  const isFlv = suf === 'flv'
+  return (
+    <Fragment>
+      {
+        isFlv ? <ReactFlvPlayer url={src} isMuted={true} /> : <video src={src} controls autoPlay={true} controlsList="nodownload">
+          <source type={`video/${suf}`} src={src} />
+          您的浏览器不支持 video 标签。
+    </video>
+      }
+    </Fragment>
+
+  )
+}

public/react/src/modules/user/usersInfo/video/InfosVideo.js

@@ -1,16 +1,15 @@
 import React, { useState, useEffect, useContext, useRef, memo } from 'react';
-import {Link} from 'react-router-dom';
-import {Pagination, Input, Button} from 'antd'
-import { getUrl2, isDev, ThemeContext, ActionBtn, NoneData } from 'educoder'
+import { Pagination, Input, Button } from 'antd'
+import { ThemeContext, ActionBtn, NoneData } from 'educoder'
 import axios from 'axios'
 import VideoInReviewItem from './VideoInReviewItem'
 import EditVideoModal from './EditVideoModal'
 import './InfosVideo.css'
 import InfoTab from '../common/InfoTab'
 import HeadlessModal from '../common/HeadlessModal'
-import CRoundSelect from '../common/CRoundSelect'
 
 import ClipboardJS from 'clipboard'
+import VideoPlay from '../../../courses/Video/video-play';
 
 function useModal(initValue) {
     const [visible, setVisible] = useState(initValue)
@@ -45,11 +44,11 @@ const DEFAULT_VIDEO_WIDTH_IN_MD = "90%" // 400
 const DEFAULT_VIDEO_HEIGHT_IN_MD = "55%" // 400
 let videoId = {};
 let _clipboard = null;
-const _items=[
-    {key: 'published_at-desc', name: '最新上传'},
-    {key: 'published_at-asc', name: '最早上传'},
+const _items = [
+    { key: 'published_at-desc', name: '最新上传' },
+    { key: 'published_at-asc', name: '最早上传' },
 ]
-function InfoVideo (props) {
+function InfoVideo(props) {
     const [videos, setvideos] = useState(undefined)
     const [reviewvideos, setReviewvideos] = useState(undefined)
     const [count, setCount] = useState(0)
@@ -140,7 +139,7 @@ function InfoVideo (props) {
         } else {
             fetchReviewvideos()
         }
-    }, [ pageObj.current, sortKey ])
+    }, [pageObj.current, sortKey])
 
     useEffect(() => {
         if (videoModalObj.visible == false) {
@@ -219,7 +218,7 @@ function InfoVideo (props) {
 
 
     }
-    function getCopyText (file_url, cover_url) {
+    function getCopyText(file_url, cover_url) {
         return `<video src="${file_url}" controls="true" controlslist="nodownload" width="${DEFAULT_VIDEO_WIDTH_IN_MD}" height="${DEFAULT_VIDEO_HEIGHT_IN_MD}" poster="${cover_url}">您的浏览器不支持 video 标签。</video>`
     }
 
@@ -238,12 +237,7 @@ function InfoVideo (props) {
                 className="showVideoModal"
                 width={800 - 1}
             >
-							<video
-                    autoplay="true"
-                    ref={videoEl}
-                    src={videoId.file_url} controls="true" controlslist="nodownload">
-                    您的浏览器不支持 video 标签。
-                </video>
+                <VideoPlay src={videoId.file_url} />
                 <div className="df copyLine">
                     <Input value={_inputValue}
                         className="dark"
@@ -329,7 +323,7 @@ function InfoVideo (props) {
             }}>
                 <span>
                     共
-                    <span style={{color: theme.foreground_orange1}}> {count} </span>
+                    <span style={{ color: theme.foreground_orange1 }}> {count} </span>
                     个视频
                 </span>
 
@@ -340,7 +334,7 @@ function InfoVideo (props) {
                 {/*sortKey={sortKey }*/}
                 {/*></CRoundSelect>}*/}
 
-							{categoryObj.category == 'all' &&<div className="fr">
+                {categoryObj.category == 'all' && <div className="fr">
                     <li className="drop_down">
                         <span className="color-grey-9 font-12" style={{
                             marginRight: " 5px",
@@ -407,7 +401,7 @@ function InfoVideo (props) {
                                     >
                                     </VideoInReviewItem>)
                                 })
-                : <NoneData style={{width: '100%'}}></NoneData>
+                                : <NoneData style={{ width: '100%' }}></NoneData>
                     }
                 </div>
                 :
@@ -425,7 +419,7 @@ function InfoVideo (props) {
                                     >
                                     </VideoInReviewItem>)
                                 })
-                : <NoneData style={{width: '100%'}}></NoneData>
+                                : <NoneData style={{ width: '100%' }}></NoneData>
                     }
                 </div>
             }