Scratch3.0開發記錄（一）添加video-react模塊

其他Scratch簡介、目錄結構可以自行查詢，介紹本博客不做贅述，直接進入功能開發介紹

本節實現的是去除Scratch自帶的視頻流，改為從OSS url播放視頻通過添加video-react組件完成對Scratch自帶 wistia-video 視頻組件的替換。

關於video-react：一個react web視頻播放器，不做過多介紹。最終效果如下：

 

 

 后續文章會加入視頻文件選擇功能、服務器視頻接口、后台對接等功能。

 

 1.通過NPM安裝視依賴項 

npm install –save video-react  /   npm install video-react  /  npm install--save video-react react react-dom redux

 2.index.ejs更改

添加<link rel="stylesheet" href="static/video-react.css" /> video-react.css文件后期需要更改所以從node—modules/video-react/diet中提取出來放到靜態文件目錄  

 3.card.jsx更改

添加

import {Player, ControlBar, ReplayControl,
　　　　ForwardControl, CurrentTimeDisplay,
　　　　TimeDivider, PlaybackRateMenuButton, VolumeMenuButton} from 'video-react';
更改

<VideoStep
    dragging={dragging}
    expanded={expanded}
    video={translateVideo(steps[step].video, locale)}  //下方fluid設置
/>
為

<Player
    className={styles.videoReact}
    poster="封面圖url可以為空，自動截取第一幀"
    fluid={false}
    width="100%"
    height="auto"
    src="視頻url"
>
    <ControlBar>
        <ReplayControl seconds={10} order={1.1} />
        <ForwardControl seconds={30} order={1.2} />
        <CurrentTimeDisplay order={4.1} />
        <TimeDivider order={4.2} />
        <PlaybackRateMenuButton
            rates={[5, 2, 1, 0.5, 0.1]}
            order={7.1}
        />
        <VolumeMenuButton disabled />
    </ControlBar>
</Player>

4.card樣式更改比較基礎就不做介紹了
5.注意：
video-react.css需要修改

.video-react .video-react-video {

　　 /* position: absolute; */  原樣式

　　/* top: 0; */

　　/* left: 0; */

　　position: relative;

　　width: 100%;

　　height: 100%;

}