首页 前端知识 vue使用mpegts.js教程

vue使用mpegts.js教程

2024-07-08 09:07:24 前端知识 前端哥 1011 854 我要收藏

vue使用mpegts.js教程

  • 最简单好用的H265网页播放器-mpegts.js
    • 简介
    • 特征
    • 受限性
  • 使用步骤
    • 安装引入
    • HTML 中添加视频标签
      • video知识扩展
    • 在容器里创建播放器

最简单好用的H265网页播放器-mpegts.js

H265是新一代视频编码规范,与H264相比压缩比更高,同样的码率下视频质量更高,或者说同样质量的视频占用的带宽和存储更少

简介

mpegts.js 是在 HTML5 上直接播放MPEG-TS/FLV流的播放器,针对低延迟直播优化。mpegts.js 通过在 JavaScript 中渐进化解析 MPEG2-TS 流并实时转封装为 ISO BMFF (Fragmented MP4),然后通过 Media Source Extensions 接口把音视频数据共给 HTML5 < video > 元素

特征

  • 支持H264和H265视频格式
  • 列表支持FLV封装的H.264/H.265 + AAC / MP3媒体内容
  • 支持HTTP-FLV,WebSocket-FLV协议
  • 兼容Chrome, FireFox, Safari 10, IE11 和Edge
  • 支持浏览器硬加

受限性

由于实现原理是通过js对各种h265封装进行解封装,最后封装成统一的mp4格式供给video标签,本身并不做解码,所以播放能力最终以来播放终端的软硬件环境,如果设备或浏览器本身不支持h265就无法正常播放,比如Win7系统和较早的手机通常都无法播放h265视频。

使用步骤

安装引入

npm install --save mpegts.js

import mpegts from 'mpegts.js';

HTML 中添加视频标签

     
     <video
      ref="videoPlayer"
      muted="muted">
      </video>

video知识扩展

为了改善用户体验,浏览器策略限制自动播放需静音,若设置直接打开页面就播放,会报错,无法播放

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
  • 但以下情况除外

在这里插入图片描述

  • 需求

页面打开的时候,视频就自动播放

  • 解决方案

我们可以根据第一条,如果视频是静音状态下就可以自动播放,所以在自动播放的时候失败的时候,选择静音播放,提示打开声音,用户点击,于是有了第二个条件,视频就可以带着声音播放了。


<div class="box">
    <video
      ref="videoPlayer"
      muted="muted">
      </video>
    <div class="model">
      <button>开始播放</button>
    </div>
  </div>
  
——————

const video = this.$refs.videoPlayer

const model = document.querySelector('.model')
const btn = document.querySelector('button')
// 第一种方法 引导用户去与页面交互实现播放
async function play() {
  try {
    await video.play();
    //使用await的原因是因为video.play()方法返回的是一个Promise,所以在这里我们可以对他进行一些处理
    model.style.display = 'none';
    btn.removeEventListener('click', play);
    // 如果他自动播放了就隐藏按钮,消除点击事件
  } catch (err) {
    model.style.display = 'block';
    btn.addEventListener('click', play);
    // 如果Promise返回的是error就引导用户点击按钮,在调用play方法
  }
}
play();

//第二种方法比较主流,类似的有网页版抖音以及B站
function play() {
  video.muted = true;//设置视频为静音
  video.play();//调用播放方法
  const ctx = new AudioContext();
  const canAutoPlay = ctx.state === 'running'; //通过这个可以判断出视频能不能够自动播放 如何可以它的值就是“running” 否则为"suspended"
  // 如果是不能播放我们就执行下面的逻辑,其实就是类似于第一种方法,让用户与其交互
  ctx.close();
  if (canAutoPlay) {
    video.muted = false;
    model.style.display = 'none';
    btn.removeEventListener('click', play);
  }
  else {
    model.style.display = 'block';
    btn.addEventListener('click', play);
  }
}
play()

在容器里创建播放器


    data() {
    return {
      player: null,
    };
   },

——————
   
    createPlayer(url) {
      if (mpegts.isSupported()) { //判断浏览器是否支持播放
        if (this.player) {
          this.destory();
        }
        this.player = mpegts.createPlayer( //创建一个播放器实例
          {
            type: "flv",//播放的格式 flv mp4 ts mse等
            url,
            isLive: true, //指示数据源是否为直播流
            isAutoPlay: true,//是否自动播放
            isContinue: true, //是否循环播放
            lazyLoad: true,//如果有足够的数据进行播放,则终止http连接
            hasAudio: false,//声音关闭,如果传来的视频流没有声音,就一定要设置这个参数,否则会报错
          },
          {
            enableWorker: true,//是否启用分离线程
            enableStashBuffer: false,//是否关闭IO隐藏缓冲区
            stashInitialSize: 128,//IO存储缓冲区初始大小,默认为384kb
          }
        );

        this.player.attachMediaElement(this.$refs.videoPlayer); //将播放器注册到Video节点
        this.player.load(); //加载
        setTimeout(() => {
          this.player
            .play()
            .then(() => {
              console.log("播放");
            })
            .catch((err) => {
              console.log("err", err);
            });
        });
      }
    },

    destory() {
      if (this.player) {
        try {
          this.player.pause(); //暂停播放
          this.player.unload();//取消数据流加载
          this.player.detachMediaElement();//将播放实例从节点中取出
          this.player.destroy(); //销毁
          this.player = null;
        } catch (e) {
          // console.log(e);
        }
      }
    },
转载请注明出处或者链接地址:https://www.qianduange.cn//article/13879.html
标签
评论
发布的文章

html左右两栏布局实现

2024-08-04 00:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!