first commit
This commit is contained in:
23
players/dash.html
Normal file
23
players/dash.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>DASH Live Streaming</title>
|
||||
<link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet">
|
||||
<script src="https://vjs.zencdn.net/7.5.5/video.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>DASH Player</h1>
|
||||
<video id="player" class="video-js vjs-default-skin" width="720" controls preload="auto">
|
||||
<source src="/dash/test_src.mpd" type="application/dash+xml" />
|
||||
</video>
|
||||
<script>
|
||||
var player = videojs('#player');
|
||||
</script>
|
||||
|
||||
<div id="footer">
|
||||
<font size="2"> Tareq-Alqutami - 2019</font>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
23
players/hls.html
Normal file
23
players/hls.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>HLS Live Streaming</title>
|
||||
<link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet">
|
||||
<script src="https://vjs.zencdn.net/7.5.5/video.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>HLS Player</h1>
|
||||
<video id="player" class="video-js vjs-default-skin" width="720" controls preload="auto">
|
||||
<source src="/hls/test.m3u8" type="application/x-mpegURL" />
|
||||
</video>
|
||||
<script>
|
||||
var player = videojs('#player');
|
||||
</script>
|
||||
|
||||
<div id="footer">
|
||||
<font size="2"> Tareq-Alqutami - 2019</font>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
41
players/hls_hlsjs.html
Normal file
41
players/hls_hlsjs.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>HLS streaming</title>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>HLS Player (using hls.js)</h1>
|
||||
|
||||
<div class="well">
|
||||
<div class="embed-responsive embed-responsive-16by9">
|
||||
<video id="video" style="max-height: 50%" class="embed-responsive-item video-js vjs-default-skin" controls muted="muted"></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
if(Hls.isSupported()) {
|
||||
var video = document.getElementById('video');
|
||||
var hls = new Hls();
|
||||
hls.loadSource('/hls/test.m3u8');
|
||||
hls.attachMedia(video);
|
||||
hls.on(Hls.Events.MANIFEST_PARSED,function() {
|
||||
video.play();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="footer">
|
||||
<font size="2">Tareq-Alqutami - 2019</font>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
24
players/rtmp.html
Normal file
24
players/rtmp.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>RTMP Live Streaming</title>
|
||||
<title>Live Streaming</title>
|
||||
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
|
||||
<script src="https://unpkg.com/video.js/dist/video.js"></script>
|
||||
<script src="https://unpkg.com/videojs-flash/dist/videojs-flash.min.js"></script>
|
||||
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>RTMP Player</h1>
|
||||
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="720"
|
||||
data-setup='{"techOrder": ["html5","flash"]}'>
|
||||
<source src="rtmp://127.0.0.1:1935/live/test" type="rtmp/mp4">
|
||||
</video>
|
||||
|
||||
<div id="footer">
|
||||
<font size="2">Tareq Alqutami - 2019</font>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
30
players/rtmp_hls.html
Normal file
30
players/rtmp_hls.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Live Streaming</title>
|
||||
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
|
||||
<script src="https://unpkg.com/video.js/dist/video.js"></script>
|
||||
<script src="https://unpkg.com/videojs-flash/dist/videojs-flash.min.js"></script>
|
||||
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>RTMP Player</h1>
|
||||
<video id="rtmp_video" class="video-js vjs-default-skin" controls preload="auto" width="720"
|
||||
data-setup='{"techOrder": ["html5","flash"]}'>
|
||||
<source src="rtmp://127.0.0.1:1935/live/test" type="rtmp/mp4">
|
||||
</video>
|
||||
|
||||
<h1>HLS Player</h1>
|
||||
<video id="hls_video" class="video-js vjs-default-skin" controls preload="auto" width="720"
|
||||
data-setup='{"techOrder": ["html5","flash"]}'>
|
||||
<source src="http://127.0.0.1:8080/hls/test.m3u8" type="application/x-mpegURL">
|
||||
</video>
|
||||
|
||||
<div id="footer">
|
||||
<font size="2">Tareq Alqutami - 2019</font>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
Reference in New Issue
Block a user