94 lines
2.7 KiB
HTML
94 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Native Video Test</title>
|
|
<style>
|
|
body {
|
|
margin: 20px;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
.video-container {
|
|
max-width: 800px;
|
|
margin: 0 auto 40px;
|
|
}
|
|
h1, h2 {
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Native Video Test</h1>
|
|
|
|
<div class="video-container">
|
|
<h2>Direct MP4 Test (Video 1)</h2>
|
|
<video controls width="100%">
|
|
<source src="/videos/video1.mp4.f136.mp4" type="video/mp4">
|
|
<source src="/videos/video1.mp4.mkv" type="video/mkv">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
|
|
<div class="video-container">
|
|
<h2>Direct MP4 Test (Video 2)</h2>
|
|
<video controls width="100%">
|
|
<source src="/videos/video2.mp4.f398.mp4" type="video/mp4">
|
|
<source src="/videos/video2.mp4.webm" type="video/webm">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
|
|
<div class="video-container">
|
|
<h2>Direct MP4 Test (Video 3)</h2>
|
|
<video controls width="100%">
|
|
<source src="/videos/video3.mp4.f136.mp4" type="video/mp4">
|
|
<source src="/videos/video3.mp4.mkv" type="video/mkv">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
|
|
<div class="video-container">
|
|
<h2>HLS Test (Video 1)</h2>
|
|
<video controls width="100%">
|
|
<source src="/videos/hls/video1/index.m3u8" type="application/x-mpegURL">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
|
|
<div class="video-container">
|
|
<h2>HLS Test with VideoJS</h2>
|
|
<link href="/css/vendor/video-js.min.css" rel="stylesheet">
|
|
<script src="/js/videojs/video.min.js"></script>
|
|
<script src="/js/videojs/videojs-http-streaming.min.js"></script>
|
|
<video id="test-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="360">
|
|
<source src="/videos/hls/video1/index.m3u8" type="application/x-mpegURL">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (typeof videojs === 'undefined') {
|
|
console.error('VideoJS is not loaded');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
var player = videojs('test-video', {
|
|
html5: {
|
|
vhs: {
|
|
overrideNative: true
|
|
}
|
|
}
|
|
});
|
|
|
|
player.on('error', function() {
|
|
console.error('Video error:', player.error());
|
|
});
|
|
} catch (e) {
|
|
console.error('Error initializing video:', e);
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html> |