原因

最近公司有个需求，要求付费的大视频防止下载，不卡顿功能。
优先使用的是阿里的视频点播，自己琢磨没事干，网上很多电影视频网站是如何做到的呢，然后就是各种搜，得到了一下结果

这个video标签的src地址是下载不了的，这下和电影网站的一样了

代码比较简单，直接贴

<template>
  <div>
    <div id="dplayer" ref="player" class="dplayer"></div>
  </div>
</template>

<script>
import Hls from 'hls.js'
import DPlayer from 'dplayer'

export default {
  data () {
    return {
      dp: null,
      video: {}
    }
  },
  methods: {
    loadVideo (videoInfo) {
      this.dp = new DPlayer({
        element: this.$refs.player,
        video: {
          //  pic: videoInfo.img, // 封面
          url: videoInfo.video,
          type: 'customHls',
          customType: {
            customHls: function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }
        }
      })
    }
  },
  mounted () {

    this.video = {
      //封面
      //img: "https://cn.bing.com/th?id=OHR.MeotoIwa_ZH-CN3126370410_1920x1080.jpg&rf=LaDigue_1920x1080.jpg",
      //地址
      video: 'https://xxx.com/yanxue/gen/testdemo1/test.m3u8',
    }
    this.loadVideo(this.video)
  }
}
</script>
<style lang="less" scoped>
.dplayer {
  width: 500px;
}
</style>

注意一点的是，这个视频的地址不是.mp4文件哈，而是转码后的.m3u8格式文件。

那接下来重点就是mp4文件如何转码成m3u8文件呢，百度一搜出来一个工具：ffmpeg。

ffmpeg

官网地址：http://ffmpeg.org/
我这里也上传了我用的版本，闲费事的可以直接下载：ffmpeg

点击download后跳转对应的下载页面选择window版本

下载自己对应的版本即可

下载解压后，点击到bin目录下

将目录配置到系统的环境变量中，cmd输入ffmpeg出现一下界面即安装成功


接下来就是转码了，将mp4的视频文件转码成m3u8
命令行cd 切换到对应mp4文件视频目录下，执行一下命令（记得对应的文件名改成自己的）

ffmpeg -i test.mp4 -profile:v baseline -level 3.0 -s 640*360 -start_number 0 -hls_time 10 -hls_list_size 0 -f hls test.m3u8

成功后，在对应的文件夹下会生成m3u8文件和ts切片文件

将对应的m3u8文件上传自己的服务器外网能访问即可，（注意对应生成的m3u8文件必须和生成的对应的ts文件放同一文件夹下）
之后将对应的m3u8文件的地址放到上面我们代码的video的url中就可以咯

到对应的项目，建议还是使用阿里点播，比较方便，
因为个人理解这种方式你需要在服务器中搭建一个视频转换服务，这个服务需要你将视频下载到服务器中，转码好之后再上传的对应的文件服务器或者文件存储中，跑完之后还需要将服务器的源文件删除，不然占用服务器的存储。
如果有兴趣可以自己撘一个，这里我就没有撘了

补充：后面自己简单写了一个服务，有兴趣可以参考：ffmpeg转换服务

参考文档：https://wuhancoder.com/blog/OtSxCkcztU.html
http://www.wuhancoder.com/blog/spXTOTpLnb.html