构建直播网站播放（并解决不同系统之间的问题）
程序员文章站
2022-06-17 17:45:40
摘要：有序搭建了一个推流视频直播平台，之前一直都是利用obs或ffmpeg进行推流，以srs作为视频流接收和转发服务器，利用ffmpeg->ffpaley作为拉流器播放视频，但是作为播放端 应该尽量建议操作，因此基于此，在web浏览器上写了一个网页。网页的功能是要是：1.设置一个video标签2.设置视频流地址3.根据系统的不同，使用不同的视频格式，苹果系统的主要使用hls流，其他系统主要使用flv视频流，如果系统判定为苹果系统，则转跳到hls-index.htm......
摘要：由于搭建了一个推流视频直播平台，之前一直都是利用obs或ffmpeg进行推流，以srs作为视频流接收和转发服务器，利用ffmpeg->ffpaley作为拉流器播放视频，但是作为播放端 应该尽量简单操作，基于此，写了一个网页以便在web浏览器观看直播端。
网页的功能是要是：
1.设置一个video标签
2.设置视频流地址
3.根据系统的不同，使用不同的视频格式，苹果系统的主要使用hls流，其他系统主要使用flv视频流，如果系统判定为苹果系统，则转跳到hls-index.html页面。
live-index.html：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>live</title>
<style>
.mainContainer {
display: block;
width: 640px;
}
.urlInput {
display: block;
width: 100%;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height: 320px;
}
.controls {
display: block;
width: 100%;
text-align: left;
}
.goto{
height: 50px;
}
</style>
</head>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>
<body>
<!-- <div class="card text-center border-0">
<div class="card-body">
<video id="videoElement" controls autoplay >Your browser is too
old which doesn't support HTML5 video.</video>
</div>
</div> -->
<!-- <br> -->
<!-- <div class="controls">
<button onclick="flv_start()">开始</button>
<button onclick="flv_pause()">暂停</button>
<button onclick="flv_destroy()">停止</button>
<input style="width:100px" type="text" name="seekpoint" />
<button onclick="flv_seekto()">跳转</button>
</div> -->
<!-- <div class="goto">
<p>
<a href="./hls-index.html">苹果系统请点击</a>
</p>
</div> -->
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
<script>
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if ((navigator.userAgent.match(/(iPhone|iPod|ios|iPad)/i))) {
window.location.href="./hls-index.html" //手持端(WAP)网站
}
var player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
// if (isiOS) { //如果是ios系统
// //
// // window.location.href="./hls-index.html"
// // alert("非法访问！");
// // hls_html = '<video id=\'my-video\' class=\'video-js\' controls preload=\'auto\' width=\'640\' height=\' 320\' '
// // + ' data-setup=\'{ "html5" : { "nativeTextTracks" : true } }\'>'
// // + ' <source src=\'http://127.0.0.*:8080/live/dk.m3u8\' type="application/x-mpegURL"> '
// // + ' <p class=\'vjs-no-js\'>'
// // + ' To view this video please enable JavaScript, and consider upgrading to a web browser that'
// // + ' <a href=\'https://videojs.com/html5-video-support/\' target=\'_blank\'>supports HTML5 video</a>'
// // + ' </p>'
// // + ' </video>';
// // document.body.innerHTML = hls_html;
// // var player = videojs('my-video');
// // player.play();
// }
// else // 否则
// {
//
// }
var flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
enableWorker:true,
enableStashBuffer:false,
stashInitialSize:128,
url: 'http://127.0.0.*:8080/live/dk.flv',
});
html = '<div class="card text-center border-0">'
+ '<div class="card-body"> '
+ '<video id="videoElement" controls autoplay width="640" height="320" >Your browser is too '
+ 'old which no support HTML5 video.</video>'
+ '</div>'
+ '</div>'
document.body.innerHTML = html;
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flv_start();
function flv_start() {
player.play();
}
function flv_pause() {
player.pause();
}
function flv_destroy() {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
function flv_seekto() {
player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
}
}
</script>
</body>
</html>hls-index.html
<head>
<title>live</title>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">
</head>
<body>
<video id='my-video' class='video-js' controls preload='auto' width='640' height='320'
data-setup='{ "html5" : { "nativeTextTracks" : true } }'>
<source src='http://127.0.0.*:8080/live/dk.m3u8' type="application/x-mpegURL">
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video>
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
<script>
var player = videojs('my-video');
player.play();
</script>
</body>
本文地址：https://blog.csdn.net/sundy_ywz/article/details/112861860