Video Player Generator
`;
codeOutput.textContent = htmlCode;
}
function resetPlayer() {
// Reset to default values
currentPlayer = {
style: 'default',
width: 800,
height: 450,
primaryColor: '#3498db',
bgColor: '#ffffff',
fontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
showControls: true,
showPlaylist: false,
autoPlay: false,
loopVideo: false,
muteVideo: false,
videoUrl: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
posterUrl: 'https://peach.blender.org/wp-content/uploads/bbb-splash.png',
playlist: [
{
title: 'Big Buck Bunny',
url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
},
{
title: 'Elephants Dream',
url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4'
},
{
title: 'For Bigger Blazes',
url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4'
}
]
};
// Update UI controls
playerStyle.value = 'default';
playerWidth.value = 800;
playerWidthValue.textContent = '800px';
playerHeight.value = 450;
playerHeightValue.textContent = '450px';
primaryColor.value = '#3498db';
primaryColorHex.value = '#3498db';
primaryColorPreview.style.background = '#3498db';
bgColor.value = '#ffffff';
bgColorHex.value = '#ffffff';
bgColorPreview.style.background = '#ffffff';
fontFamily.value = "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif";
showControls.checked = true;
showPlaylist.checked = false;
autoPlay.checked = false;
loopVideo.checked = false;
muteVideo.checked = false;
videoUrl.value = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
posterUrl.value = 'https://peach.blender.org/wp-content/uploads/bbb-splash.png';
playlistVideos.value = 'Big Buck Bunny|https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\nElephants Dream|https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4\nFor Bigger Blazes|https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4';
// Apply changes
updatePlayer();
updateCode();
}
function exportCode() {
const htmlCode = codeOutput.textContent;
const blob = new Blob([htmlCode], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'video-player.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
alert('Video player code downloaded successfully!');
}
});
