vue使用mpegts.js教程

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.jsimport mpegts from 'mpegts.js';

HTML 中添加视频标签

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

video知识扩展

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

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

在这里插入图片描述

  • 需求

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

  • 解决方案

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


<div class="box"><videoref="videoPlayer"muted="muted"></video><div class="model"><button>开始播放</button></div></div>——————const video = this.$refs.videoPlayerconst 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连接},{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);}}},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/657756.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JUC CompletableFuture

文章目录 CompletableFuture^1.8^CompletionStage 接口thenApply 系列thenAccept 系列thenRun 系列thenCombine 系列thenAcceptBothrunAfterBothapplyToEitheracceptEitherrunAfterEitherthenComposewhenCompletehandle其他 CompletionStage 的方法总结 CompletableFuture 实例…

excel中提取一串数字中的某几个数字

excel中提取一串数字中的某几个数字 提取一串数字中的某几个数字&#xff0c;使用公式函数截取数据 LEFT函数&#xff1a;用于截取单元格左边的字符&#xff0c;例如“LEFT(A1,5)”会返回A1单元格中的前5个字符。RIGHT函数&#xff1a;用于截取单元格右边的字符&#xff0c;例…

西方网络安全人才培养的挑战及对策

文章目录 前言一、网络安全人才力量发展现状(一)注重从战略上重视网络安全人才培养和发展。(二)注重从多渠道多路径招募网络安全人才。(三)注重分层次分阶段系统规划网络安全人才培养模式。(四)注重通过实践锻炼进一步提升网络攻防实战能力。二、网络安全人才面临的形势…

软件工程知识梳理6-运行和维护

软件维护需要的工作量很大&#xff0c;大型软件的维护成本高达开发成本的4倍左右。所以&#xff0c;软件工程的主要目的就是要提高软件的可维护性&#xff0c;减少软件维护所需要的工作量&#xff0c;降低软件系统的总成本。 定义&#xff1a;软件已经交付使用之后&#xff0c;…

真机调试,微信小程序,uniapp项目在微信开发者工具中真机调试,手机和电脑要连同一个wifi,先清空缓存,页面从登录页进入,再点真机调试,这样就不会报错了

微信小程序如何本地进行真机调试&#xff1f;_unity生成的微信小程序怎么在电脑上真机测试-CSDN博客 微信小程序 真机调试 注意事项 uniapp项目在微信开发者工具中真机调试&#xff0c;手机和电脑要连同一个wifi&#xff0c;先清空缓存&#xff0c;页面从登录页进入&#xf…

Flask 入门2:路由

1. 前言 在上一节中&#xff0c;我们使用到了静态路由&#xff0c;即一个路由规则对应一个 URL。而在实际应用中&#xff0c;更多使用的则是动态路由&#xff0c;它的 URL是可变的。 2. 定义一个很常见的路由地址 app.route(/user/<username>) def user(username):ret…

安装 vant-ui 实现底部导航栏 Tabbar

本例子使用vue3 介绍 vant-ui 地址&#xff1a;介绍 - Vant 4 (vant-ui.github.io) Vant 是一个轻量、可定制的移动端组件库 安装 通过 npm 安装&#xff1a; # Vue 3 项目&#xff0c;安装最新版 Vant npm i vant # Vue 2 项目&#xff0c;安装 Vant 2 npm i vantlatest-v…

选型 之 工业相机篇

一、概述 23年24年行情不会好&#xff0c;公司各种想办法裁员&#xff0c;在大陆这个大熔炉中只能不断地提炼。我个人主要是在工业领域做2D图像算法和3D算法&#xff0c;但是现在出去都需要全能人才 方案、算法、运动控制等&#xff0c;我目前最大的短板就是方案&#xff0c;在…

【Javaweb程序设计】【C00165】基于SSM的高考志愿辅助填报系统(论文+PPT)

基于SSM的高考志愿辅助填报系统&#xff08;论文PPT&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于ssm的高考志愿辅助填报系统 本系统分为前台系统模块、后台管理员模块以及后台学生模块 前台系统模块&#xff1a;当游客打开系统的网址后&…

跟着cherno手搓游戏引擎【11】静态库、警告消除(渲染预热)

premake修改&#xff1a; SRC下的premake workspace "YOTOEngine" -- sln文件名architecture "x64" configurations{"Debug","Release","Dist"} startproject "Sandbox" -- https://github.com/premake/premak…

wrappedComponentRef和ref的区别

wrappedComponentRef 是在使用高阶组件 (Higher-Order Component) 包装组件时的一个 prop&#xff0c;它用于引用被包装的组件实例。 ref 是 React 提供的用于访问 DOM 元素或者组件实例的属性。在创建组件时&#xff0c;可以给组件添加一个 ref 属性&#xff0c;然后通过该属…

springboot(ssm拍卖管理系统 在线竞拍拍卖系统Java系统

springboot(ssm拍卖管理系统 在线竞拍拍卖系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#…

springboot中获取配置文件中属性值的几种方式

目录 第一章、使用Value注解第二章、使用PropertySource注解第三章、使用Configurationproperties注解第四章、使用Java Properties类第五章、使用Environment接口 友情提醒: 先看文章目录&#xff0c;大致了解文章知识点结构&#xff0c;点击文章目录可直接跳转到文章指定位置…

DC-磁盘管理(23国赛真题)

2023全国职业院校技能大赛网络系统管理赛项–模块B:服务部署(WindowServer2022) 文章目录 题目配置步骤组成RAID 5,磁盘分区命名为卷标H盘:Raid5。手动测试破坏一块磁盘,做RAID磁盘修复,确认RAID 5配置完毕。验证查看Raid5(打开磁盘管理器,查看raid信息)Raid5磁盘修复…

JavaEE学习笔记 2024-1-25 --VUE的入门使用

上一篇 个人整理非商业用途&#xff0c;欢迎探讨与指正&#xff01;&#xff01; 文章目录 14.VUE基础14.1VUE的入门使用14.2条件判断14.3循环渲染14.4v-bind绑定标签属性14.5v-model表单标签的双向绑定14.6事件处理14.7axios 14.VUE基础 前端框架 UI框架:页面渲染Bootstrap,L…

Android 车联网——CarMediaService介绍(十九)

一、简介 CarMediaService 是安卓汽车平台中的一个服务,用于管理和控制车辆媒体系统的播放和音频功能。该服务允许车主和乘客通过车辆媒体系统访问音乐、广播、播客等媒体内容,并提供了一系列功能来控制和管理这些媒体资源。 主要功能 媒体播放控制:该服务允许车主和乘客通…

判断是否是IE浏览器

在我们开发页面中总会遇到解决兼容问题&#xff0c;一般通过css hack根据不同浏览器写不同的css,或者判断浏览器加载不同的模块。在这里我们将分享判断ie的方法 一、IE条件注释&#xff08;h5方法&#xff09; IE的判断写法只兼容到IE9&#xff0c;IE10及其以上只能显示非IE的…

Python中如何使用urllib3进行http请求 (一)

Urllib3是什么以及为什么使用它&#xff1f; Urllib3是一个强大且用户友好的Python HTTP客户端。它被设计用来替代默认的Python库进行HTTP请求的urllib2。相比于urllib2&#xff0c;Urllib3具有许多优势&#xff0c;包括连接池、线程安全和对HTTP/1.1的支持。此外&#xff0c;…

Coremail启动鸿蒙原生应用开发,打造全场景邮件办公新体验

1月18日&#xff0c;华为在深圳举行鸿蒙生态千帆启航仪式&#xff0c;Coremail出席仪式并与华为签署鸿蒙合作协议&#xff0c;宣布正式启动鸿蒙原生应用开发。作为首批拥抱鸿蒙的邮件领域伙伴&#xff0c;Coremail的加入标志着鸿蒙生态版图进一步完善。 Coremail是国内自建邮件…