integrate the video player into Blogger
integrate the video player into Blogger
How to integrate the video player into Blogger
To integrate the video player into Blogger, you need to adapt the HTML, CSS, and JavaScript to work within a Blogger post or page.
Step 1: Add the HTML Structure
In Blogger, go to the page or post where you want to embed the video player.
Switch to the HTML view and paste the following code:
To create a single HTML page for Blogger that allows you to load and play video files or direct links (such as `.m3u8` or `.m3u`), here's a complete code that includes HTML, CSS, and JavaScript:
Complete HTML Code for Blogger
You can use the following code within a Blogger post or page by switching to the HTML editor mode:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Direct Link Video Player</title>
<style>
.player-wrapper {
max-width: 100%;
margin: 0 auto;
position: relative;
}
#video-player {
width: 100%;
height: auto;
background: #000;
}
.controls {
text-align: center;
margin-top: 10px;
}
.controls input[type="text"] {
padding: 8px;
width: 80%;
max-width: 400px;
margin-right: 10px;
}
.controls input[type="file"] {
margin-right: 10px;
}
.controls button {
padding: 8px 16px;
}
</style>
</head>
<body>
<div class="player-wrapper">
<video id="video-player" controls>
<source src="" type="video/mp4">
<!-- Additional sources can be added here if needed -->
</video>
</div>
<div class="controls">
<input type="text" id="video-url" placeholder="Enter Direct Link">
<input type="file" id="video-file" accept=".m3u8,.mp4,.mkv">
<button id="load-video">Load Video</button>
</div>
<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const player = new Plyr('#video-player', {
controls: ['play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
});
document.getElementById('load-video').addEventListener('click', function() {
const videoUrl = document.getElementById('video-url').value;
const videoPlayer = document.getElementById('video-player');
const videoFile = document.getElementById('video-file').files[0];
if (videoFile) {
const fileURL = URL.createObjectURL(videoFile);
playVideo(fileURL);
} else if (videoUrl) {
playVideo(videoUrl);
}
});
function playVideo(url) {
const videoPlayer = document.getElementById('video-player');
if (Hls.isSupported() && url.includes('.m3u8')) {
let hls = new Hls();
hls.loadSource(url);
hls.attachMedia(videoPlayer);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
videoPlayer.play();
});
} else if (url.includes('.mpd')) {
dashjs.MediaPlayer().create().initialize(videoPlayer, url, true);
} else {
videoPlayer.src = url;
videoPlayer.play();
}
}
});
</script>
</body>
</html>
```
How to Use the Code
1. Copy the Code: Copy the entire HTML code provided above.
2. Paste in Blogger:
- Go to your Blogger dashboard.
- Create a new post or page.
- Switch to the HTML editor (by clicking on the "HTML" button).
- Paste the copied code.
3. Publish: After pasting the code, you can publish the post or page.
The video player will be embedded directly into the Blogger post.
Features Files Support
- Direct Link Support: You can paste direct links (e.g., `.m3u8`, `.mpd`, `.mp4`, `.mkv`) into the input field to load and play the video.
- File Upload Support: You can upload video files directly from your computer (e.g., `.m3u8`, `.mp4`, `.mkv`), and the player will load and play them.
- Responsive Player: The player is fully responsive, adapting to the width of the container.
This setup makes it easy to integrate a video player that can handle various formats directly within a Blogger post or page.
Comments
Post a Comment