Script M3U Player For Blogger
Script M3U Player For Blogger
How to Create an m3u File Player for Blogger with a Sidebar Channel List
If you're looking to embed a custom m3u file player on your Blogger site, you've come to the right place.
An m3u file is essentially a playlist format that can contain multiple streaming channels, typically used for IPTV.
In this article, we will walk you through the steps to create an m3u file player for your Blogger site.
This player allows users to input a direct link to an m3u file or upload one, with the channels displayed in a sidebar list.
This article should provide your readers with a clear understanding of how to create an m3u file player for Blogger, as well as how to customize it to fit their needs.
What You’ll Need
Before we dive into the code, let’s make sure you have everything you need:
- **Blogger Account**: Ensure you have an active Blogger account and a blog where you can add custom HTML code.
- **m3u File**: You should have access to an m3u file or a direct link to one.
Step-by-Step Guide To Create M3u Player
1. Preparing the HTML Code
Below is the HTML, CSS, and JavaScript code you’ll need to create the m3u file player.
This code includes an input field for a direct m3u link, a file upload option, and a player that will display the channels from the m3u file in a list under the player.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>M3U Player</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
#player {
width: 80%;
height: 500px;
background-color: #000;
margin: 20px 0;
}
#channelList {
width: 80%;
max-height: 300px;
overflow-y: auto;
background-color: #333;
color: #fff;
padding: 15px;
}
.channel {
margin-bottom: 10px;
cursor: pointer;
padding: 5px;
border: 1px solid #444;
border-radius: 4px;
background-color: #555;
}
.channel:hover {
background-color: #777;
}
input[type="text"], input[type="file"] {
width: calc(80% - 20px);
margin: 10px 0;
padding: 8px;
font-size: 16px;
}
button {
width: 80%;
padding: 10px;
font-size: 16px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #555;
}
</style>
</head>
<body>
<div id="player">Select a channel to play here</div>
<input type="text" id="m3uUrl" placeholder="Enter M3U URL">
<input type="file" id="m3uFile" accept=".m3u">
<button onclick="loadM3U()">Load Channel List</button>
<div id="channelList"></div>
<script>
function loadM3U() {
let fileInput = document.getElementById('m3uFile');
let urlInput = document.getElementById('m3uUrl').value;
if (fileInput.files.length > 0) {
let file = fileInput.files[0];
let reader = new FileReader();
reader.onload = function(e) {
parseM3U(e.target.result);
};
reader.readAsText(file);
} else if (urlInput) {
fetch(urlInput)
.then(response => response.text())
.then(data => parseM3U(data))
.catch(error => console.error('Error fetching M3U:', error));
} else {
alert('Please enter an M3U URL or upload an M3U file.');
}
}
function parseM3U(data) {
let lines = data.split('\n');
let channelList = document.getElementById('channelList');
channelList.innerHTML = '';
lines.forEach((line, index) => {
if (line.startsWith('#EXTINF:')) {
let channelName = line.split(',')[1];
let streamUrl = lines[index + 1];
let channelItem = document.createElement('div');
channelItem.className = 'channel';
channelItem.textContent = channelName;
channelItem.onclick = () => playChannel(streamUrl);
channelList.appendChild(channelItem);
}
});
}
function playChannel(url) {
let player = document.getElementById('player');
player.innerHTML = `<video width="100%" height="100%" controls autoplay>
<source src="${url}" type="application/x-mpegURL">
Your browser does not support the video tag.
</video>`;
}
</script>
</body>
</html>
```
Adding the M3u Player Code to Blogger
To add this player to your Blogger site, follow these steps:
1. **Login to Blogger**: Sign in to your Blogger account.
2. **Create a New Post**: Go to the "Posts" section and click on "New Post".
3. **Switch to HTML View**: In the post editor, switch from "Compose" to "HTML" mode.
4. **Paste the Code**: Copy and paste the HTML code provided above.
5. **Publish**: Once you've pasted the code, click "Publish" to make the post live on your blog.
3. Customizing the Player
The code provided is a basic setup, but you can customize it further to match the style and branding of your blog. For example, you can change the colors, fonts, or even add additional features like a search bar to filter channels.
Final Thoughts
Creating an m3u file player for Blogger is a great way to offer streaming content directly on your blog.
Whether you’re running a tech blog, a personal website, or any other type of blog, this player can enhance user engagement by providing easy access to streaming channels.
Feel free to modify the code to suit your specific needs, and don't hesitate to reach out if you have any questions or need further assistance.