LOOX Video Player
You can embed your own community or unique community by others in your blog.
And please see the terms and conditions below.
<head>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.video-container {
background-color: #333;
padding: 7px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
width: 400px; /* プレーヤーの幅を固定 */
position: relative;
}
#videoPlayer {
width: 100%;
border-radius: 8px;
position: relative;
}
#playPauseIcon {
width: 20px; /* ボタンの幅を30pxに設定 */
height: 20px; /* ボタンの高さを30pxに設定 */
}
.controls {
display: flex;
align-items: center;
margin-top: 10px;
padding: 10px;
background-color: #222;
border-radius: 8px;
}
#playPauseBtn {
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
transition: transform 0.3s ease; /* アニメーションを追加 */
}
#playPauseBtn:hover {
transform: scale(1.2); /* ホバー時に少し拡大する */
}
#seekBar {
flex: 1;
margin: 0 10px;
}
#currentTime, #duration {
color: white;
}
#logo {
width: 25px; /* ロゴの幅を設定 */
height: 25px; /* ロゴの高さを設定 */
cursor: pointer; /* カーソルをポインターに設定 */
transition: transform 0.3s ease; /* アニメーションを追加 */
}
#logo:hover {
transform: scale(1.2); /* ホバー時に少し拡大する */
}
.settings-menu {
display: none; /* 初期状態では非表示 */
position: absolute;
top: 50px;
right: 10px;
background-color: #444;
padding: 10px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
z-index: 10;
}
.settings-menu label {
color: white;
display: block;
margin-bottom: 5px;
}
.settings-menu select {
background-color: #666;
color: white;
border: none;
padding: 5px;
border-radius: 4px;
width: 100%;
}
#pauseOverlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 20;
}
#pauseOverlay img {
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<div class="video-container">
<video id="videoPlayer">
<source src="https://video.wixstatic.com/video/b3eff1_c202c8749dd04c699c1338412622f392/1080p/mp4/file.mp4" type="video/mp4">
お使いのブラウザは動画タグをサポートしていません。
</video>
<div class="controls">
<button id="playPauseBtn">
<img id="playPauseIcon" src="https://static.wixstatic.com/shapes/b3eff1_e504887fadeb455592c639c3c4e3bfd1.svg" alt="Play">
</button>
<input type="range" id="seekBar" value="0" min="0">
<span id="currentTime">0:00</span> / <span id="duration">0:00</span>
<img id="logo" src="https://static.wixstatic.com/shapes/b3eff1_0da215e088e049f6804bc14e00815b3c.svg" alt="Logo">
</div>
<div class="settings-menu" id="settingsMenu">
<label for="playbackRate">動画のスピード:</label>
<select id="playbackRate">
<option value="0.5">0.5倍</option>
<option value="1" selected>1倍</option>
<option value="1.5">1.5倍</option>
<option value="2">2倍</option>
</select>
</div>
<!-- 一時停止アイコンオーバーレイ -->
<div id="pauseOverlay">
<img src="https://static.wixstatic.com/shapes/b3eff1_f67d7f310ea14f96bea6191ec0cbd88b.svg" alt="Pause Icon">
</div>
</div>
<script>
const video = document.getElementById('videoPlayer');
const playPauseBtn = document.getElementById('playPauseBtn');
const playPauseIcon = document.getElementById('playPauseIcon');
const seekBar = document.getElementById('seekBar');
const currentTimeLabel = document.getElementById('currentTime');
const durationLabel = document.getElementById('duration');
const logo = document.getElementById('logo');
const settingsMenu = document.getElementById('settingsMenu');
const playbackRateSelect = document.getElementById('playbackRate');
const pauseOverlay = document.getElementById('pauseOverlay');
// 再生/一時停止ボタンの動作
playPauseBtn.addEventListener('click', () => {
if (video.paused || video.ended) {
video.play();
playPauseIcon.src = "https://static.wixstatic.com/shapes/b3eff1_f67d7f310ea14f96bea6191ec0cbd88b.svg";
pauseOverlay.style.display = 'none'; // 再生時にオーバーレイを非表示
} else {
video.pause();
playPauseIcon.src = "https://static.wixstatic.com/shapes/b3eff1_e504887fadeb455592c639c3c4e3bfd1.svg";
pauseOverlay.style.display = 'block'; // 一時停止時にオーバーレイを表示
}
});
// 動画の時間とシークバーの更新
video.addEventListener('timeupdate', () => {
const currentTime = video.currentTime;
const duration = video.duration;
seekBar.value = (currentTime / duration) * 100;
currentTimeLabel.textContent = formatTime(currentTime);
durationLabel.textContent = formatTime(duration);
});
// 動画が終了した時の処理
video.addEventListener('ended', () => {
playPauseIcon.src = "https://static.wixstatic.com/shapes/b3eff1_5e341c033ad34307b1a1cc4f704596b2.svg";
});
// シークバーの動作
seekBar.addEventListener('input', () => {
const duration = video.duration;
video.currentTime = (seekBar.value / 100) * duration;
});
// 時間表示を分:秒形式にフォーマット
function formatTime(time) {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}
// ロゴをクリックしたときの設定メニューの表示/非表示
logo.addEventListener('click', () => {
settingsMenu.style.display = settingsMenu.style.display === 'none' ? 'block' : 'none';
});
// 再生速度の変更
playbackRateSelect.addEventListener('change', () => {
video.playbackRate = parseFloat(playbackRateSelect.value);
});
// 初期状態では設定メニューは非表示
settingsMenu.style.display = 'none';
</script>
</body>
</html>
Step 1
Copy code
Step 2
Read the description on the left side of the code
Change all the green codes.
rules
This code is not open source.Please do not use this code outside of LOOX!