百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

H5标签video,如何播放流视频

yuyutoo 2025-01-06 16:12 4 浏览 0 评论

web视频播放器,我们都知道flash插件,这是个很牛逼又无奈的插件,都是标准不统一导致的结果,作为一名程序猿,我必须使用h5来实现,哪些ie老版本我们就忽略。

下面来说下如何实现:

  • 视频格式

一般浏览器支持ogg、mpeg4、webM这几种格式,但是也是看浏览器以及版本的,这里我们不多说了,大家想了解可以百度下很多资料;

大家有没有想过,为什么存在视频是这几类格式,但播放不了的情况,其实是因为视频的编码导致的,一般h5只支持ogg(theorg视频编解码)、webM(vp8视频编解码)、MP4(h264视频编解码)。对应其他编码的视频,h5是无法支持的。

  • 视频编码器转化

我们拿mp4视频格式来做个例子,编码转化的工具其实很多,本人比较常用的是ffmpeg,主要使用方便,而且很给力,加上一定简单的转化代码,具体用法就不说了,不是本文重点,

ffmpeg -i input.mp4 -vcodec h264 output.mp4

-i           ---------指定源视频地址
-vcodec---------指定视频编码格式
  • h5的video标签加管道

我们要实现的是流水似的视频播放器,好处当然是体验更好了,如果一个1G的视频给你,是会怎么做,直接放到video播放吗?那可以想象需要加载很长时间的,用户体验肯定好不了。这时候我们就需要给video加上管道,让他一边加载一边播放,想象一下是不是很美好;

废话不多说,我们就好简单介绍下如何实现吧!

1、视频分段

最开始我们肯定是需要将大视频进行分段,使用ffmpeg就能将视频分成n份小视频。具体百度,这里不介绍。

2、muxjs

这个是一个视频格式的封装,他是用javascript来实现的,使用方法也很简单

// 创建muxjs的transmuxer对象
let transmuxer = new muxjs.mp4.Transmuxer();
transmuxer.on('data', (segment) => {
		let data = new Uint8Array(segment.initSegment.byteLength + segment.data.byteLength);
		data.set(segment.initSegment, 0);
		data.set(segment.data, segment.initSegment.byteLength);
		console.log(muxjs.mp4.tools.inspect(data));
		sourceBuffer.appendBuffer(data);
	})
	// 取第一个视频的数据,推入transmuxer对象时会处罚data事件。
	fetch(url).then((response) => {
		return response.arrayBuffer();
	}).then((response) => {
		transmuxer.push(new Uint8Array(response));
		transmuxer.flush();
	})

3、MSE

全名叫media Source Extensions,就是视频流的对象,使用这个我们就能给水库接上管子

let mediaSource = new MediaSource();
// 创建muxjs的transmuxer对象
let transmuxer = new muxjs.mp4.Transmuxer();
// 获取video标签对象,并赋值src
video = document.querySelector('video');
video.src = URL.createObjectURL(mediaSource);
//添加mediaSource流载体的sourceopen事件
mediaSource.addEventListener("sourceopen", appendFirstSegment);

mediaSource的sourceopen事件,就是打开流管道的开关,具体的api可以百度,很多

总结:如上所述就能实现一个流h5视频播放器。

主要用到的插件:

ffmpeg---视频编码转化,视频分段等

muxjs--小段视频的封装,主要是让视频能完全支持MSE,其实就是转化成支持流视频

MES--h5的video标签的升级加固

相关推荐

网站制作的流程是什么呢?简单大概的流程

关注我!了解更多网站建设的小干货~如今,随着网络时代的全面到来,网站在人们的生活和工作中发挥着极其重要的作用。网站制作的发展使更多的人加入了这个行业。如果你想掌握网站制作的知识,你可以在学校或网上学习...

一款谷歌(Google)打造的广告网页设计制作软件

GoogleWebDesigner是由谷歌(Google)打造的一款广告网页设计制作软件,它能够帮助从事于广告网页设计工作或是有这方面需求的用户更加有效快速的进行完成相关的行业设计工作,软件可以支...

普通网站如何制作一个网站?

对行外人来讲,在预备做一个网站项目时,最想了解的无非就是网站制作的悉数流程。网站制作是要有计划的,事先策划好才能更快更好的完成。网站的几个基本组成元素:域名+空间+程序+模板+维护经验+日常管理.网站...

用纯Python就能写一个漂亮的网页,再见HTML

再见HTML!用纯Python就能写一个漂亮的网页我们在写一个网站或者一个网页界面的时候,需要学习很多东西,对小白来说很困难!比如我要做一个简单的网页交互:天啊,听听头都大呢!其实我就给老板做一个...

HTML表单4(form的action、method属性)——零基础自学网页制作

表单的工作过程表单的信息发送与处理过程可以简单的进行图示,如下图。以注册会员为例,用户在自己的电脑上打开相应的注册表单页面填写信息,完成填写后点击提交按钮,也就是图中1所示过程。这时浏览器会将这些信息...

官网网站设计网页制作模板建站前端自适应响应式网站仿站门户

案例背景航科慧联无人机搜索雷达能够在多种天气下检测到无人机的入侵、并获得目标的距离、方向和高度等具体信息,是无人机反制作战中的关键设备。航科慧联无人机搜索雷达能够在多种天气下检测到无人机的入侵、并获得...

软网推荐:在线制作软件图标

在制作PPT演示、软件、网页或其他程序时,我们往往需要用到一些个性化的图标。现在,即便是不安装任何软件,也可以上网在线制作自己需要的图标。首先访问如下制作网址:http://www.rw-design...

自定义跳转的h5网页如何制作?

文章来源:墨鹊微站...

网页如何制作?这几点要知道

这是一个个性张扬的时代,也是一个动手能力和动脑能力都比较强的时代,因此很多人对于能够自己动手完成的东西,都不太想假手于人。于是网页制作成了各大搜索引擎里面排名比较靠前的关键词之一。想要知道网页如何制作...

手机端网站简单制作教程,怎么快速制作一个移动端的网站

想要创建一个手机端的网站,需要有域名、已经完成网站页面的开发设计,零基础朋友不懂代码技术,直接在线套用乔拓云里面的网站模板来开发是比较简单可行的,进入乔拓云网,复制网站模板编辑网站的内容,注册域名后绑...

几张动图教你轻松了解Dreamweaver做网页

施老师:当今可是互联网时代,人们的生活、社交离不开互联网,那么不管你是网页设计师,还是销售达人,还是个体户,总必不可少的要在网上呈现一些页面给客户看,这个就是让你做网页,而Dreamweaver是做网...

用Deepseek制作网页版的汉诺塔游戏保姆级教程

在deepseek中输入:“帮我做一个网页版的汉诺塔演示游戏,游戏包含2层、3层、4层、5层的汉诺塔游戏演示,制作自动求解演示按钮,点击按钮就可以生成出步数,同时自动演示最优解动画。”...

JS制作网页版计算器

大家晚上好,我是洁哥,抱歉今天有点晚了,但是洁哥不会缺席哦,今天我们来看一个JS实现网页版计算器的例题,先来看一看出来的效果吧(123+123=246)(123-123=0)(123*123=1512...

网页制作流程哪几步

在数字化时代,网页制作成为企业和个人展示形象、传递信息的重要方式。但是,许多人对于网页制作的流程仍感到困扰。为了解决这一问题,我们将深入探讨网页制作的关键步骤,助您更好地理解和应用这一过程。第一步:需...

这4个设计技巧,教你做好个人网页制作

随着互联网发展,个人建站已经不是什么稀奇事,学生、求职者、插画师、摄影师、作家……都可以制作个人网站,用来展示自身形象,或者吸引粉丝。那么如何做好个人网站呢?在不懂设计和技术知识的情况下,个人网页制作...

取消回复欢迎 发表评论: