fix fly file play bug

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

@@ -1,12 +1,13 @@
-import React,{ Component } from "react";
+import React, { Component } from "react";
-import { Input , Pagination } from 'antd';
+import { Input, Pagination } from 'antd';
-import { NoneData ,ActionBtn } from 'educoder';
+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{
+class Video extends Component {
-  constructor(props){
+  constructor(props) {
     super(props);
-    this.state={
+    this.state = {
-      videos:undefined,
+      videos: undefined,
-      count:0,
+      count: 0,
-      page:1,
+      page: 1,
 
-      videoId:undefined,
+      videoId: undefined,
-      videoVisible:false,
+      videoVisible: false,
-      visible: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,{
+        axios.delete(url, {
-          params:{
+          params: {
-            video_id:item.id
+            video_id: item.id
           }
-        }).then(result=>{
+        }).then(result => {
-          if(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(){
+  render() {
-    const { visible , videoVisible , videoId } = this.state;
+    const { visible, videoVisible, videoId } = this.state;
-    const CourseId=this.props.match.params.coursesId;
+    const CourseId = this.props.match.params.coursesId;
-    const login=this.props.user&&this.props.user.login;
+    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 && <VideoPanel src={videoId.file_url} />}
-              videoId &&
-              <video
-                autoplay="true"
-                ref={videoEl}
-                src={videoId.file_url} controls="true" controlslist="nodownload">
-                您的浏览器不支持 video 标签。
-              </video>
-            }
 
           <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)=>{
+                          videos.map((item, key) => {
-                      return(
+                            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

@@ -9,6 +9,7 @@ import InfoTab from '../common/InfoTab'
 import HeadlessModal from '../common/HeadlessModal'
 
 import ClipboardJS from 'clipboard'
+import VideoPlay from '../../../courses/Video/video-play';
 
 function useModal(initValue) {
     const [visible, setVisible] = useState(initValue)
@@ -236,12 +237,7 @@ function InfoVideo(props) {
                 className="showVideoModal"
                 width={800 - 1}
             >
-                <video
+                <VideoPlay src={videoId.file_url} />
-                    autoplay="true"
-                    ref={videoEl}
-                    src={videoId.file_url} controls="true" controlslist="nodownload">
-                    您的浏览器不支持 video 标签。
-                </video>
                 <div className="df copyLine">
                     <Input value={_inputValue}
                         className="dark"