关于B站如何播放flv

关于B站如何播放flv

1、HTML5视频播放

进入Web2.0时代,新一代标记语言HTML5成为主流。很多网站开始向HTML5转移。比如我们广大青年喜爱的哔哩哔哩。HTML5中播放视频用的是video标签,支持Ogg、MPEG4、WebM三种格式。那么B站上的视频都是flv格式的,那么它是怎么播放的。可以看到B栈站支持Flash和H5播放,但Flash到2020年谷歌不再支持了(Adobe早在2016年就宣布不再维护更新了,18年正式宣布废弃),随着谷歌带头,各大浏览器厂商会陆续不再支持,最迟到2020年底。关于B站如何播放flv_第1张图片

2、历史遗留问题

这是一个历史遗留问题,早期网络播放器大量依赖于Flash,自然而然地,流媒体文件格式flv就成了网络最常用的流媒体格式。随着Flash遭到Adobe抛弃,移动端对Flash的不友好,之前的flv的播放就成为了一个问题。

3、解决方案

由于html5 video标签只支持mp4,要想也支持flv,我们就要拆解flv了。由于flv容器封装的是H264+AAC,所以我们可以在网页端收到flv后,使用js代码解析flv,取出H264以及AAC,然后封装成mp4文件,再喂给video标签就可以了。这样我们就可以无插件播放flv了,由于mp4封装比flv复杂多了,所以这样可以减轻服务器压力,服务器不用再专门封装mp4文件。youku用的hls,跟flv类似,也需要一个js插件把hls转成mp4。于是哔哩哔哩自己开发了一套库用于格式转换,使 Bilibili 网页端平滑过度到 HTML5 播放器,历史遗留不再是障碍。
这个库便是flv.js,纯原生 JavaScript 开发。该库用的是ES6语法,然后通过 Babel Compiler 编译成 ECMAScript 5,使用 Browserify 打包。
我写了一个demo,仅供参考(这里我使用了BootCDN提供的CDN服务):


<html>
	<head>
		<meta charset="utf-8" />
		<title>播放flvtitle>
		<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js">script>
	head>
	<body>
		<video id="videoElement" controls="controls">video>
		<script>
			if (flvjs.isSupported()) {//检查flvjs能否正常使用
				var videoElement = document.getElementById('videoElement');//使用id选择器找到第二步设置的dom元素
				var flvPlayer = flvjs.createPlayer({//创建一个新的flv播放器对象
					type: 'flv',//类型flv
					url: 'https://music.163.com/d1318724-d4cf-4394-95c3-e35b3833e7de'//flv文件地址
				});
				flvPlayer.attachMediaElement(videoElement);//将flv视频装载进video元素内
				flvPlayer.load();//载入视频
				flvPlayer.play();//播放视频,如果不想要自动播放,去掉本行
			}
		script>
	body>
html>

你可能感兴趣的:(前端,javascript,html5)