视频播放页静态页面

package.json

@@ -70,6 +70,7 @@
     "style-loader": "0.23.1",
     "terser-webpack-plugin": "1.2.2",
     "url-loader": "1.1.2",
+    "video.js": "^7.5.4",
     "webpack": "4.28.3",
     "webpack-dev-server": "3.1.14",
     "webpack-manifest-plugin": "2.0.4",

src/components/video/index.js

@@ -7,10 +7,15 @@ import Recommendation from './recommendation'
 import VideoCatalog from './video-catalog'
 import DatumCatalog from './datum-catalog'
 import { Toast } from 'antd-mobile';
+import videojs from 'video.js'
+import 'video.js/dist/video-js.min.css'
+// import 'video.scss'
 
 
 class Video extends Component {
 
+    video;
+
     state = {
         title: '视频',
         courseId: 140,
@@ -20,6 +25,18 @@ class Video extends Component {
 
 
     componentDidMount() {
+        window.HELP_IMPROVE_VIDEOJS = false;
+        videojs(this.video, {
+            controls: true,
+            autoplay: true,
+            preload: 'auto',
+            bigPlayButton: true,
+            textTrackDisplay: false,
+            posterImage: false,
+            errorDisplay: false,
+        }, function () {
+            this.log.debug()
+        })
         this.getVideoCatalog()
         this.getDatumCatalog()
     }
@@ -66,6 +83,9 @@ class Video extends Component {
             <div className='play'>
                 <HeaderBar title={this.state.title}/>
                 <div className="video">
+                    <video className={'video-js'} ref={el => this.video = el}>
+                        <source src='/v2/ts/40/191/175d6e5a.m3u8' type='application/x-mpegURL'/>
+                    </video>
                 </div>
                 <div className='tab'>
                     <div>
@@ -81,7 +101,7 @@ class Video extends Component {
                         >资料</NavLink>
                     </div>
                 </div>
-                <Route path={`${match.path}/video`} render={props => {
+                {/*<Route path={`${match.path}/video`} render={props => {
                     return <VideoCatalog videoCatalog={this.state.video_catalog} {...props}/>
                 }}/>
                 <Route path={`${match.path}/datum`} render={props => {
@@ -89,7 +109,7 @@ class Video extends Component {
                 }}/>
                 <Route render={props => {
                     return <Recommendation {...props} courseId={this.state.courseId}/>
-                }}/>
+                }}/>*/}
             </div>
         );
     }

src/components/video/video.scss

@@ -5,6 +5,11 @@ $tabHeight: 44px;
         width: 100%;
         height: 215px;
         background-color: $black;
+
+        video {
+            width: 100%;
+            height: 100%;
+        }
     }
 
     .tab {

src/setupProxy.js

@@ -8,10 +8,11 @@ module.exports = function (app) {
             config[item]['development'], {
                 target: config[item]['test'],
                 changeOrigin: true,
+                // secure: false,
                 pathRewrite: {
                     [`^${config[item]['development']}`]: ''
                 },
-                ...item['proxy']
+                ...config[item]['proxy']
             }
         ))
     })

src/utils/proxy-config.js

@@ -11,6 +11,14 @@ const config =  {
         production: 'https://search.julyedu.com',
         proxy: {}
     },
+    v2: {
+        development: '/v2',
+        test: 'https://v2.julyedu.com',
+        production: 'https://search.julyedu.com',
+        proxy: {
+            secure: false,
+        }
+    },
 }
 
 module.exports = config
\ No newline at end of file