flask_media_player_l3
"/home/yossef/notes/git/projects/flask_media_player/flask_media_player_l3.md"
path: git/projects/flask_media_player/flask_media_player_l3.md
- **fileName**: flask_media_player_l3
- **Created on**: 2025-03-31 17:37:18
the file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="../static/main.css">
</head>
<body>
<section class="container">
<div class="row logo">
<img src="/static/logo.png" alt="logo">
<h2>Video Player</h2>
</div>
<div class="row">
<!-- video youtube-->
<form action="/v/">
<div class="">
<div class="form-group">
<input type="url" name="url" required
placeholder="Enter Video URL" class="form-control">
</div>
</div>
<div class="">
<div class="form-group">
<button class="btn btn-block btn-lg btn-info">
Submit <i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
</form>
<!-- Local Video Upload -->
<div id="container__local__video">
<h1>Upload a Local Video</h1>
<form class="upload_from_local" method="POST" enctype="multipart/form-data">
<input type="file" class="" id="videoUpload" name="video" accept="video/*" />
<button type="submit" class="btn btn-block btn-lg btn-success">
Upload Video <i class="fas fa-upload"></i>
</button>
</form>
</div>
</div>
<button id="recordButton" class="btn btn-primary">Start Camera Recording</button>
<video id="preview" width="320" height="240" autoplay muted style="display: none;"></video>
</section>
<script>
// Camera Recording
const recordButton = document.getElementById('recordButton');
const preview = document.getElementById('preview');
let mediaRecorder;
let recordedChunks = [];
let isRecording = false;
recordButton.addEventListener('click', async () => {
if (!isRecording) {
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
preview.srcObject = stream;
preview.style.display = 'block';
recordButton.textContent = 'Stop Recording';
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = event => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'recorded-video.webm';
a.click();
preview.srcObject = null;
stream.getTracks().forEach(track => track.stop());
recordedChunks = [];
isRecording = false;
recordButton.textContent = 'Start Camera Recording';
preview.style.display = 'none';
};
mediaRecorder.start();
isRecording = true;
} catch (error) {
console.error('Error accessing camera:', error);
}
} else {
mediaRecorder.stop();
}
});
</script>
</body>
</html>
for file html localvideo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Local Video Player</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome for icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="../static/main.css">
</head>
<body>
<div class="container">
<h2>
Local Video Player
</h2>
<!-- if there is a video found -->
{% if uploaded_video %}
<h2>Uploaded Video:</h2>
<video width="640" height="360" controls autoplay>
<source src="{{ url_for('uploaded_file', filename=uploaded_video) }}" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- if there is no video found -->
{% else %}
<p class="no-video"><i class="fas fa-exclamation-circle"></i> No video URL provided.</p>
{% endif %}
<a href="/" class="btn btn-home mt-3 d-block">
<i class="fas fa-arrow-left"></i> Back to Home
</a>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
for videoplayer.html for youtube video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Video Player</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome for icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="../static/main.css">
</head>
<body>
<!-- Header -->
<h2> Simple Video Player</h2>
<!-- url for vidoe-->
<a href="{{ url }}" target="_blank" class="block">🔗 {{ url }}</a>
<!-- Display URL as a clickable link -->
<div class="video-container">
<!-- Handle YouTube or direct video links -->
<!-- Check if the URL is a YouTube link -->
<!-- and gettting the video id for youtube video -->
<!-- references: -->
<!-- https://stackoverflow.com/questions/3452546/how-do-i-get-the-youtube-video-id-from-a-url -->
{% if "youtube.com" in url or "youtu.be" in url %}
{% set video_id = url.split('v=')[-1].split('&')[0] if
"youtube.com" in url else url.split('/')[-1].split('?')[0]
%}
<iframe
class="block"
src="https://www.youtube.com/embed/{{ video_id }}" frameborder="0" allowfullscreen>
</iframe>
<!-- if not video is youtube video -->
{% else %}
<video controls autoplay>
<source src="{{ url }}" type="video/mp4">
Your browser does not support the video tag.
</video>
{% endif %}
<!-- Back link -->
<a href="/" class="btn btn-home mt-3 d-block">
<i class="fas fa-arrow-left"></i> Back to Home
</a>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
continue:[[]]
before:./flask_media_player_l2.md