美文网首页
13、解决线上100M以上视频循环播放倒是页面卡死的情况

13、解决线上100M以上视频循环播放倒是页面卡死的情况

作者: 蜗牛的学习方法 | 来源:发表于2023-07-17 15:33 被阅读0次

    线上播放是视频是160M以上的mp4视频,经过查看发现是视频一直不断的发送请求,下面就是根据这个找到的解决方案,经过查找,发现video不适合在视频很大的情况下使用,所以使用了把mp4视频转化为m3u8的方法:

    1、mp4视频转为m3u8

    1.1、安装FFmpeg

    1.1.1 下载

    FFmpeg官网下载,

    image.png
    image.png

    1.1.2解压到本地

    image.png

    设置环境变量,搜索环境变量


    image.png

    在里面新建一条然后把bin的路径放在里面保存

    1.1.3验证安装是否成功

    ffmpeg –version
    
    image.png

    出现这个就是安装成功

    1.2、代码转换

    ffmpeg -i  C:\Users\PC\Downloads\test.mp4 -c:v libx264 -c:a aac -map 0 -f hls -hls_time 10 -hls_list_size 0 C:\Users\PC\Downloads\test.m3u8
    

    在上面的命令中,input.mp4是要切片的文件名,-hls_time表示每个切片的持续时间(这里设置为10秒),-hls_list_size表示M3U8播放列表中切片文件的最大数量(这里设置为0,表示没有限制),output.m3u8是M3U8播放列表的文件名

    2、代码使用

    2.1、下载依赖

    npm install video.js --save // 视频播放器插件
    npm install videojs-contrib-hls --save // 播放hls流插件
    

    2.2、页面使用

    <template>
    <video ref="videoPlayer" class="video-js vjs-big-play-centered"></video>
    </template>
    <script>
    import videojs from 'video.js';
    import 'video.js/dist/video-js.css';
    import 'videojs-contrib-hls';
    import zhCN from 'video.js/dist/lang/zh-CN.json';
    videojs.addLanguage('zh-CN', zhCN);
    </script>export default {
      name: 'WaterQuality',
      components: { VueQr },
      props: {},
      data() {
        return {
          videoSrc: 'http://2.0.0.1:8082/xxx.m3u8',
          options: {
            autoplay: false,
            controls: true,
            fill: true,
            loop: true,
            preload: true
          }
        };
      },
      mounted() {
        this.$nextTick(() => {
          this.initPlayer();
        });
      },
      beforeDestroy() {
        if ( this.player) {
          this.player.dispose();
        }
      },
      methods: {
        initPlayer() {
          let ref = this.$refs.videoPlayer;
          if (!ref) {
            return;
          }
          this.options.sources = [{ src: this.videoSrc, type: 'application/x-mpegURL' }];
          this.player = videojs(ref, this.options, () => {});
          this.player.language('zh-CN');
          this.player.play();
        },
      }
    };
    

    相关文章

      网友评论

          本文标题:13、解决线上100M以上视频循环播放倒是页面卡死的情况

          本文链接:https://www.haomeiwen.com/subject/uasgudtx.html