# SRS学习-HTML加载FLV视频

# 介绍

FLV (opens new window)是FLASHVIDEO的简称，FLV流媒体格式是一种新的视频格式，全称为FlashVideo。由于它形成的文件极小、加载速度极快，使得网络观看视频文件成为可能，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件 (opens new window)体积庞大，不能在网络上很好的使用等缺点。

哔哩哔哩的大佬基于该格式实现flv.js，用纯 JavaScript 编写的 HTML5 Flash 视频 (FLV) 播放器，没有 Flash。FLV 万岁！

flv官网 (opens new window)

# flv特点

具有 H.264 + AAC / MP3 编解码器播放的 FLV 容器
多部分分段视频播放
HTTP FLV 低延迟直播流播放
FLV over WebSocket 实时流播放
兼容 Chrome、FireFox、Safari 10、IE11 和 Edge
极低的开销，支持硬件加速

# 实现

我们将之前SRS服务的服务地址复制下来，添加到代码中

# 完整代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
    <style>
        body,center{
            padding:0;
            margin:0;
        }
        .v-container{
            width:640px;
            height:360px;
            border:solid 1px red;
        }
        video{
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
<div class="v-container">
    <video id="player" muted autoplay="autoplay" preload="auto" controls="controls">
    </video>
</div>
</body>
</html>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('player');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://192.168.1.1:8080/live/34020000001320000001@34020000001320000001.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 效果

← SRS：配置DVR