<video>标签不支持播放某种视频格式时如何做出提示？

前言

最近公司的门户系统突然来了个播放视频的需求，由于时间仓促并且业务也没给出具体而又明确而又细致的需求文档,并且只需支持IE11与chrome70以上版本，我第一时间选用H5中浏览器自带的$<video>$ 标签实现，哼哼，那就来吧！(项目使用React)

胸有成竹一顿操作

    import React, { useState } from 'react';
    import { Spin } from 'antd';
    
    const VideoPlayer = props => {
      const { fileUrl, videoUrl, loading } = props
    
      return (
        <div style={{ position:'relative', width: 800, height: 450 }} >
          <Spin spinning={loading} style={{ marginTop: '150px' }}>
            {videoUrl && (
              <video
                style={{ width: 800, height: 450, cursor: 'pointer', background: 'black' }}
                controls
                controlsList='nodownload'
                post={fileUrl}
                disablePictureInPicture
                onLoadedDate={() => setPostUrl(fileUrl)}
              >
                <source src={videoUrl} />
              </video> 
             )}
          </Spin>
        </div>
      )
   }

写完后发到SIT环境一测，嘶~，怎么回事？！怎么上传的视频播放不了。作为面向搜索引擎开发的我来说，这个当然不是问题。一经调查，果然，不同浏览器中，<video>标签对不同的视频格式支持度相同不了一点儿，总有那么几个“高级的”视频格式需要很高版本的浏览器才支持，比如什么.avi啊，H264的mp4啊...音视频格式相关知识请兄弟们看这儿Media container formats (file types) - Web 媒体技术 | MDN (mozilla.org)。

解决方案

很好，既然你不支持，那我就，，，我就想办法（不然还能咋整啊）;当时脑子里闪过好几个念头：后端给支持下转码？上传时后端给加个格式校验？实在不行前端就用个插件吧？等等。其实办法还是很多的，但是时间不够了，不能苦了兄弟们不是。尤其是组里那几个天天摸鱼的后端小子奥（狗头保命）！既然技术上有困难，那就只能委屈委屈需求的提出者了，咳咳！
为了用户体验咱就播放的时候加点儿提示吧，<video>标签有个特点，视频播放不了时（地址有问题啊、文件损坏啊、格式不支持啊），只会出现一个无资源的播放器。那我就可以找个$事件$监听这个video能不能正常播放,然后再更新状态，来给他加个蒙层上面提示不支持该视频格式之类的话，然后在提供下载按钮下到本地看去吧。(我真tnd的是个天才)

solution

    import React, { useState } from 'react';
    import { Spin } from 'antd';
    
    const VideoPlayer = props => {
      const { fileUrl, videoUrl, loading } = props
    
      //提示信息遮罩
      const [tipsVisible, setTipsVisible] = useState(false)
      //让封面图放在视频可加载后加载，优化视频不可播放却闪现封面图
      const [postUrl, setPostUrl] = useState('')
    
      return (
        <div style={{ position:'relative', width: 800, height: 450 }} >
          <p
            width: '100%',
            height: '100%',
            fontSize: '18px',
            color: '#fff',
            display: tipsVisible ? 'flex' : 'none',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            position: 'absolute',
            backgroundImage: 'linear-gradient(173deg, #343434 0%, #000 100%)'
          >
            <img src={require(''@/assets/home/disabledVideo.svg)} />
            <span style={{ marginBottom: 10, marginTop: 30 }} >
              视频可能损坏或者当前浏览器不支持此格式视频
            </span>
            <span>请更换浏览器或联系管理员解决</span>
          </p>
          <Spin spinning={loading} style={{ marginTop: '150px' }}>
            {videoUrl && (
              <video
                style={{ width: 800, height: 450, cursor: 'pointer', background: 'black' }}
                controls
                controlsList='nodownload'
                post={postUrl}
                disablePictureInPicture
                onError={() => setTipsVisible(true)}
                onLoadedDate={() => setPostUrl(fileUrl)}
              >
                <source src={videoUrl} />
              </video> 
             )}
          </Spin>
        </div>
      )
   }

其他

当然，一定还有很多其他方案，比如，，，欢迎兄弟姐妹们来讨论啊，快来快来~ (工作三年还是个菜鸡，决定以博客起步，监督自己奋发图强，希望大家多多支持鼓励！！！)