add video

components/Video/index.js

+import React from 'react'
+
+export default class Video extends React.PureComponent {
+  constructor(props) {
+    super(props)
+    this.state = {
+      mounted: false
+    }
+    this.mustPlay = this.mustPlay.bind(this)
+  }
+  componentDidMount() {
+    this.setState({
+      mounted: true
+    })
+    document.addEventListener('WeixinJSBridgeReady', this.mustPlay, false)
+  }
+  mustPlay() {
+    if (this.state.mounted) {
+      document.getElementById(this.props.id).play()
+      document.removeEventListener('WeixinJSBridgeReady', this.mustPlay, false)
+    } else {
+      setTimeout(this.mustPlay, 300)
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener('WeixinJSBridgeReady', this.mustPlay, false)
+  }
+  render() {
+    const { poster, src, id, full } = this.props
+    const { mounted } = this.state
+    if (!full) {
+      return (
+        <video
+          id={id}
+          loop
+          muted={true}
+          playsInline={true}
+          webkit-playsinline="true"
+          x5-video-player-type="h5-page"
+          x5-video-player-fullscreen="true"
+          disableremoteplayback="true"
+          autoPlay
+          preload="auto"
+          poster={poster}
+        >
+          <source id="mp4" src={src} type="video/mp4" />
+        </video>
+      )
+    }poster={videoPoster}
+    if (!mounted) {
+      return (
+        <video
+          data-object-fit="cover"
+          data-object-position="100% 0%"
+          id={id}
+          // loop
+          // muted={true}
+          playsInline={true}
+          webkit-playsinline="true"
+          x5-video-player-type="h5-page"
+          x5-video-player-fullscreen="true"
+          disableremoteplayback="true"
+          // autoPlay
+          preload="auto"
+          poster={poster}
+        ></video>
+      )
+    }
+    return (
+      <video
+        data-object-fit="cover"
+        data-object-position="100% 0%"
+        id={id}
+        playsInline={true}
+        webkit-playsinline="true"
+        x5-video-player-type="h5-page"
+        x5-video-player-fullscreen="true"
+        disableremoteplayback="true"
+        preload="auto"
+        poster={poster}
+      >
+        <source id="mp4" src={src} type="video/mp4" />
+      </video>
+    )
+  }
+}

pages/post.js

@@ -3,6 +3,7 @@ import marked from 'marked'
 import newsList from '../content/newsList.md'
 import Head from 'next/head'
 import { Title } from '../components/Title'
+import Video from '../components/Video'
 /* eslint-enable no-unused-vars */
 import { yymmdd } from '../utils/date'
 
@@ -75,6 +76,8 @@ export default class PostPage extends React.Component {
                       {yymmdd(new Date(post.createDate)).join('/')}
                     </div>
                   </div>
+                  {post.video && <Video id="video" src={post.video} 
+                  poster={post.videoPoster}/>}
                   <div
                     className="post-content"
                     dangerouslySetInnerHTML={(() => {

pages/postVideo.js

+import React from 'react'
+import marked from 'marked'
+import newsList from '../content/newsList.md'
+import Head from 'next/head'
+import { Title } from '../components/Title'
+/* eslint-enable no-unused-vars */
+import { yymmdd } from '../utils/date'
+
+import './post.css'
+
+export default class PostVideoPage extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      type: null,
+      article: [],
+      mounted: false
+    }
+  }
+
+  componentDidMount() {
+    // let date = document.location.href.match(/d=[^=&]*/)
+    // let type = document.location.href.match(/t=[^=&]*/)
+    let title = document.location.href.match(/t=([^=&]*)/)
+    
+    if (!title || title.length === 0) {
+      return null
+    }
+    
+    title = decodeURI(title[1])
+    // date = date[0].slice(2)
+    // type = type[0].slice(2)
+
+    const {
+      attributes: { news }
+    } = newsList
+
+    let article = []
+    news.map((n) => {
+      // const curDate = n.createDate.replace(/[^\d]/g, '')
+      if (n.title === title) {
+        article.push(n)
+      } 
+    })
+     
+    this.setState({
+      article,
+      mounted: true
+    })
+  }
+  
+  render() {
+    const { article, mounted } = this.state
+    if (!article || !mounted) return null
+    if (article.length === 0) {
+      return <div>not found</div>
+    }
+    const post = article[0]
+    // console.log(post.content)
+    return (
+            <div className="post-page">
+              <Head>
+                <title>
+                  {post.title}
+                </title>
+              </Head>
+              <div className="post-outline-wrapper">
+                <div className="bg"></div>
+                <div className="post-wrapper">
+                  <Title >
+                    { post.title}
+                  </Title>
+                  <div className="post-dateshare-wrapper">
+                    <div className="post-date">
+                      {yymmdd(new Date(post.createDate)).join('/')}
+                    </div>
+                  </div>
+                  <Video id="video" src={post.video} 
+                  poster={post.videoPoster}/>
+                  <div
+                    className="post-content"
+                    dangerouslySetInnerHTML={(() => {
+                          if (post.content) {
+                            return { __html: marked(post.content) }
+                          } else {
+                            return { __html: '暂无内容' }
+                          }
+                    })()}
+                  ></div>
+                  <div className="post-end">
+                    <img src="/static/img/logo-yellow.svg" />
+                  </div>
+                </div>
+              
+              </div>
+            </div>
+          
+    )
+  }
+}

static/admin/config.yml

@@ -62,6 +62,9 @@ collections:
           - { label: "Abstract", name: "abstract", widget: "text", required: false }
           - { label: "content", name: "content", widget: "markdown"}
           - { label: "coverpic", name: "coverpic", widget: "image", required: false }
+          - { label: "video", name: "video", widget: "image", required: false }
+          - { label: "videoPoster", name: "videoPoster", widget: "image", required: false }
+
 
   - name: "linkarticle"
     label: "linkarticle"