[HTML 5] Video
HTML Video
2023-09-14 08:59:11 时间
Binding to Media Events
import './assets/css/style.css';
import autumnMp4 from './assets/media/autumn.mp4';
const app = document.getElementById('app');
app.innerHTML = `
<h1>JavaScript HTML5 APIs</h1>
<div class="player">
<video class="media" controls>
<source src="${autumnMp4}" type="video/mp4">
<p>
HTML5 Video is not supported.
<a href="${autumnMp4}">Download this video</a> instead.
</p>
</video>
</div>
`;
const player = document.querySelector('.player');
const media = player.querySelector('.media');
media.addEventListener('durationchange', (e) => console.log(e.target.duration));
media.addEventListener('canplay', () => console.log('Ready!'));
media.addEventListener('canplaythrough', () =>
console.log('Can Play Through!')
);
media.addEventListener('timeupdate', (e) => console.log(e.target.currentTime));
media.addEventListener('play', (e) => console.log('Play', !e.target.paused));
media.addEventListener('playing', () => console.log('Playing'));
media.addEventListener('pause', (e) => console.log('Pause', e.target.paused));
media.addEventListener('ended', () => console.log('Ended'));
Custom Play, Pause and Stop Controls
import './assets/css/style.css';
import autumnMp4 from './assets/media/autumn.mp4';
import playIcon from './assets/img/icons/play.svg';
import pauseIcon from './assets/img/icons/pause.svg';
import stopIcon from './assets/img/icons/stop.svg';
const app = document.getElementById('app');
app.innerHTML = `
<h1>JavaScript HTML5 APIs</h1>
<div class="player">
<video class="media" controls>
<source src="${autumnMp4}" type="video/mp4">
<p>
HTML5 Video is not supported.
<a href="${autumnMp4}">Download this video</a> instead.
</p>
</video>
<div class="player__controls">
<button type="button" class="player__play" aria-label="Play Pause">
<img src="${playIcon}" alt="Play Pause Icon">
</button>
<button type="button" class="player__stop" aria-label="Stop">
<img src="${stopIcon}" alt="Stop Icon">
</button>
</div>
</div>
`;
const player = document.querySelector('.player');
const play = player.querySelector('.player__play');
const playImg = play.querySelector('img');
const stop = player.querySelector('.player__stop');
const media = player.querySelector('.media');
const toggleMediaStatus = () => {
if (media.paused) {
media.play();
playImg.src = pauseIcon;
} else {
media.pause();
playImg.src = playIcon;
}
};
const stopMedia = () => {
media.pause();
media.currentTime = 0;
playImg.src = playIcon;
};
play.addEventListener('click', toggleMediaStatus);
stop.addEventListener('click', stopMedia);
Syncing Medai Progressing
import './assets/css/style.css';
import autumnMp4 from './assets/media/autumn.mp4';
import playIcon from './assets/img/icons/play.svg';
import pauseIcon from './assets/img/icons/pause.svg';
import stopIcon from './assets/img/icons/stop.svg';
const app = document.getElementById('app');
app.innerHTML = `
<h1>JavaScript HTML5 APIs</h1>
<div class="player">
<video class="media" controls>
<source src="${autumnMp4}" type="video/mp4">
<p>
HTML5 Video is not supported.
<a href="${autumnMp4}">Download this video</a> instead.
</p>
</video>
<div class="player__controls">
<button type="button" class="player__play" aria-label="Play Pause">
<img src="${playIcon}" alt="Play Pause Icon">
</button>
<button type="button" class="player__stop" aria-label="Stop">
<img src="${stopIcon}" alt="Stop Icon">
</button>
<div class="player__progress">
<input type="range" class="player__timeline" min="0" max="100" value="0">
<span class="player__duration"></span>
</div>
</div>
</div>
`;
const player = document.querySelector('.player');
const play = player.querySelector('.player__play');
const playImg = play.querySelector('img');
const stop = player.querySelector('.player__stop');
const media = player.querySelector('.media');
const timeline = player.querySelector('.player__timeline');
const duration = player.querySelector('.player__duration');
let totalDuration;
const toggleMediaStatus = () => {
if (media.paused) {
media.play();
playImg.src = pauseIcon;
} else {
media.pause();
playImg.src = playIcon;
}
};
const stopMedia = () => {
media.pause();
media.currentTime = 0;
playImg.src = playIcon;
};
const getTime = (duration) => {
const time = parseInt(duration.toFixed(), 10);
const minutes = `${parseInt(time / 60)}`.padStart(2, 0);
const seconds = `${time % 60}`.padStart(2, 0);
return `${minutes}:${seconds}`;
};
const setInitialDuration = (e) => {
totalDuration = getTime(e.target.duration);
duration.innerText = `00:00 / ${totalDuration}`;
};
const setDuration = (e) => {
const currentDuration = getTime(e.target.currentTime);
const progress = (e.target.currentTime / e.target.duration) * 100;
timeline.value = progress;
duration.innerText = `${currentDuration} / ${totalDuration}`;
};
play.addEventListener('click', toggleMediaStatus);
stop.addEventListener('click', stopMedia);
media.addEventListener('durationchange', setInitialDuration);
media.addEventListener('timeupdate', setDuration);
media.addEventListener('ended', stopMedia);
Scrubbing Duration with <input type=”range”>
import './assets/css/style.css';
import autumnMp4 from './assets/media/autumn.mp4';
import playIcon from './assets/img/icons/play.svg';
import pauseIcon from './assets/img/icons/pause.svg';
import stopIcon from './assets/img/icons/stop.svg';
const app = document.getElementById('app');
app.innerHTML = `
<h1>JavaScript HTML5 APIs</h1>
<div class="player">
<video class="media" controls>
<source src="${autumnMp4}" type="video/mp4">
<p>
HTML5 Video is not supported.
<a href="${autumnMp4}">Download this video</a> instead.
</p>
</video>
<div class="player__controls">
<button type="button" class="player__play" aria-label="Play Pause">
<img src="${playIcon}" alt="Play Pause Icon">
</button>
<button type="button" class="player__stop" aria-label="Stop">
<img src="${stopIcon}" alt="Stop Icon">
</button>
<div class="player__progress">
<input type="range" class="player__timeline" min="0" max="100" value="0">
<span class="player__duration"></span>
</div>
</div>
</div>
`;
const player = document.querySelector('.player');
const play = player.querySelector('.player__play');
const playImg = play.querySelector('img');
const stop = player.querySelector('.player__stop');
const media = player.querySelector('.media');
const timeline = player.querySelector('.player__timeline');
const duration = player.querySelector('.player__duration');
let totalDuration;
const toggleMediaStatus = () => {
if (media.paused) {
media.play();
playImg.src = pauseIcon;
} else {
media.pause();
playImg.src = playIcon;
}
};
const stopMedia = () => {
media.pause();
media.currentTime = 0;
playImg.src = playIcon;
};
const getTime = (duration) => {
const time = parseInt(duration.toFixed(), 10);
const minutes = `${parseInt(time / 60)}`.padStart(2, 0);
const seconds = `${time % 60}`.padStart(2, 0);
return `${minutes}:${seconds}`;
};
const setInitialDuration = (e) => {
totalDuration = getTime(e.target.duration);
duration.innerText = `00:00 / ${totalDuration}`;
};
const setDuration = (e) => {
const currentDuration = getTime(e.target.currentTime);
const progress = (e.target.currentTime / e.target.duration) * 100;
timeline.value = progress;
duration.innerText = `${currentDuration} / ${totalDuration}`;
};
const skipToPosition = (e) => {
const position = parseInt(e.target.value, 10) / 100;
media.currentTime = media.duration * position;
};
play.addEventListener('click', toggleMediaStatus);
stop.addEventListener('click', stopMedia);
media.addEventListener('durationchange', setInitialDuration);
media.addEventListener('timeupdate', setDuration);
media.addEventListener('ended', stopMedia);
timeline.addEventListener('input', skipToPosition);
Scrubbing Volume Levels and Mute Functionality
import './assets/css/style.css';
import autumnMp4 from './assets/media/autumn.mp4';
import playIcon from './assets/img/icons/play.svg';
import pauseIcon from './assets/img/icons/pause.svg';
import stopIcon from './assets/img/icons/stop.svg';
import volumeIcon from './assets/img/icons/volume.svg';
import volumeMuteIcon from './assets/img/icons/volume-mute.svg';
const app = document.getElementById('app');
app.innerHTML = `
<h1>JavaScript HTML5 APIs</h1>
<div class="player">
<video class="media" controls>
<source src="${autumnMp4}" type="video/mp4">
<p>
HTML5 Video is not supported.
<a href="${autumnMp4}">Download this video</a> instead.
</p>
</video>
<div class="player__controls">
<button type="button" class="player__play" aria-label="Play Pause">
<img src="${playIcon}" alt="Play Pause Icon">
</button>
<button type="button" class="player__stop" aria-label="Stop">
<img src="${stopIcon}" alt="Stop Icon">
</button>
<div class="player__progress">
<input type="range" class="player__timeline" min="0" max="100" value="0">
<span class="player__duration"></span>
</div>
<div class="player__sound">
<img src="${volumeIcon}" class="player__mute" alt="Volume Icon">
<input type="range" class="player__volume" min="0" max="100" value="100">
</div>
</div>
</div>
`;
const player = document.querySelector('.player');
const play = player.querySelector('.player__play');
const playImg = play.querySelector('img');
const stop = player.querySelector('.player__stop');
const media = player.querySelector('.media');
const timeline = player.querySelector('.player__timeline');
const duration = player.querySelector('.player__duration');
const volume = player.querySelector('.player__volume');
const volumeToggle = player.querySelector('.player__mute');
let totalDuration;
const toggleMediaStatus = () => {
if (media.paused) {
media.play();
playImg.src = pauseIcon;
} else {
media.pause();
playImg.src = playIcon;
}
};
const stopMedia = () => {
media.pause();
media.currentTime = 0;
playImg.src = playIcon;
};
const getTime = (duration) => {
const time = parseInt(duration.toFixed(), 10);
const minutes = `${parseInt(time / 60)}`.padStart(2, 0);
const seconds = `${time % 60}`.padStart(2, 0);
return `${minutes}:${seconds}`;
};
const setInitialDuration = (e) => {
totalDuration = getTime(e.target.duration);
duration.innerText = `00:00 / ${totalDuration}`;
};
const setDuration = (e) => {
const currentDuration = getTime(e.target.currentTime);
const progress = (e.target.currentTime / e.target.duration) * 100;
timeline.value = progress;
duration.innerText = `${currentDuration} / ${totalDuration}`;
};
const skipToPosition = (e) => {
const position = parseInt(e.target.value, 10) / 100;
media.currentTime = media.duration * position;
};
const setVolume = (e) => {
const position = parseInt(e.target.value, 10) / 100;
media.volume = position;
volumeToggle.src = media.volume > 0 ? volumeIcon : volumeMuteIcon;
};
const toggleVolume = () => {
const isMuted = media.volume === 0;
volumeToggle.src = isMuted ? volumeIcon : volumeMuteIcon;
volume.value = isMuted ? 100 : 0;
volume.dispatchEvent(new Event('input'));
// media.volume = isMuted ? 1 : 0;
};
play.addEventListener('click', toggleMediaStatus);
stop.addEventListener('click', stopMedia);
media.addEventListener('durationchange', setInitialDuration);
media.addEventListener('timeupdate', setDuration);
media.addEventListener('ended', stopMedia);
timeline.addEventListener('input', skipToPosition);
volume.addEventListener('input', setVolume);
volumeToggle.addEventListener('click', toggleVolume);
Picture-in-Picture (PiP) Mode
import './assets/css/style.css';
import autumnMp4 from './assets/media/autumn.mp4';
import playIcon from './assets/img/icons/play.svg';
import pauseIcon from './assets/img/icons/pause.svg';
import stopIcon from './assets/img/icons/stop.svg';
import volumeIcon from './assets/img/icons/volume.svg';
import volumeMuteIcon from './assets/img/icons/volume-mute.svg';
import pipIcon from './assets/img/icons/popup.svg';
const app = document.getElementById('app');
app.innerHTML = `
<h1>JavaScript HTML5 APIs</h1>
<div class="player">
<video class="media" controls>
<source src="${autumnMp4}" type="video/mp4">
<p>
HTML5 Video is not supported.
<a href="${autumnMp4}">Download this video</a> instead.
</p>
</video>
<div class="player__controls">
<button type="button" class="player__play" aria-label="Play Pause">
<img src="${playIcon}" alt="Play Pause Icon">
</button>
<button type="button" class="player__stop" aria-label="Stop">
<img src="${stopIcon}" alt="Stop Icon">
</button>
<div class="player__progress">
<input type="range" class="player__timeline" min="0" max="100" value="0">
<span class="player__duration"></span>
</div>
<button type="button" class="player__pip" aria-label="Picture-in-Picture">
<img src="${pipIcon}" alt="Picture-in-Picture Icon">
</button>
<div class="player__sound">
<img src="${volumeIcon}" class="player__mute" alt="Volume Icon">
<input type="range" class="player__volume" min="0" max="100" value="100">
</div>
</div>
</div>
`;
const player = document.querySelector('.player');
const play = player.querySelector('.player__play');
const playImg = play.querySelector('img');
const stop = player.querySelector('.player__stop');
const media = player.querySelector('.media');
const timeline = player.querySelector('.player__timeline');
const duration = player.querySelector('.player__duration');
const volume = player.querySelector('.player__volume');
const volumeToggle = player.querySelector('.player__mute');
const pip = player.querySelector('.player__pip');
let totalDuration;
const toggleMediaStatus = () => {
if (media.paused) {
media.play();
playImg.src = pauseIcon;
} else {
media.pause();
playImg.src = playIcon;
}
};
const stopMedia = () => {
media.pause();
media.currentTime = 0;
playImg.src = playIcon;
};
const getTime = (duration) => {
const time = parseInt(duration.toFixed(), 10);
const minutes = `${parseInt(time / 60)}`.padStart(2, 0);
const seconds = `${time % 60}`.padStart(2, 0);
return `${minutes}:${seconds}`;
};
const setInitialDuration = (e) => {
totalDuration = getTime(e.target.duration);
duration.innerText = `00:00 / ${totalDuration}`;
};
const setDuration = (e) => {
const currentDuration = getTime(e.target.currentTime);
const progress = (e.target.currentTime / e.target.duration) * 100;
timeline.value = progress;
duration.innerText = `${currentDuration} / ${totalDuration}`;
};
const skipToPosition = (e) => {
const position = parseInt(e.target.value, 10) / 100;
media.currentTime = media.duration * position;
};
const setVolume = (e) => {
const position = parseInt(e.target.value, 10) / 100;
media.volume = position;
volumeToggle.src = media.volume > 0 ? volumeIcon : volumeMuteIcon;
};
const toggleVolume = () => {
const isMuted = media.volume === 0;
volumeToggle.src = isMuted ? volumeIcon : volumeMuteIcon;
volume.value = isMuted ? 100 : 0;
volume.dispatchEvent(new Event('input'));
};
play.addEventListener('click', toggleMediaStatus);
stop.addEventListener('click', stopMedia);
media.addEventListener('durationchange', setInitialDuration);
media.addEventListener('timeupdate', setDuration);
media.addEventListener('ended', stopMedia);
timeline.addEventListener('input', skipToPosition);
volume.addEventListener('input', setVolume);
volumeToggle.addEventListener('click', toggleVolume);
const initPictureInPicture = () => {
pip.addEventListener('click', () => {
if (!document.pictureInPictureElement) {
media.requestPictureInPicture();
} else {
document.exitPictureInPicture();
}
});
media.addEventListener('enterpictureinpicture', () => {
console.log('Entered PiP');
});
media.addEventListener('leavepictureinpicture', () => {
console.log('Left PiP');
});
};
if ('pictureInPictureEnabled' in document) {
initPictureInPicture();
}
Using the new Audio() constructor
import './assets/css/style.css';
import autumnMp3 from './assets/media/autumn.mp3';
import autumnMp4 from './assets/media/autumn.mp4';
import playIcon from './assets/img/icons/play.svg';
import pauseIcon from './assets/img/icons/pause.svg';
import stopIcon from './assets/img/icons/stop.svg';
import volumeIcon from './assets/img/icons/volume.svg';
import volumeMuteIcon from './assets/img/icons/volume-mute.svg';
import pipIcon from './assets/img/icons/popup.svg';
const app = document.getElementById('app');
app.innerHTML = `
<h1>JavaScript HTML5 APIs</h1>
<div class="player">
<!--<audio class="media">
<source src="${autumnMp3}" type="audio/mpeg">
</audio>-->
<!--<video class="media" controls>
<source src="${autumnMp4}" type="video/mp4">
<p>
HTML5 Video is not supported.
<a href="${autumnMp4}">Download this video</a> instead.
</p>
</video>-->
<div class="player__controls">
<button type="button" class="player__play" aria-label="Play Pause">
<img src="${playIcon}" alt="Play Pause Icon">
</button>
<button type="button" class="player__stop" aria-label="Stop">
<img src="${stopIcon}" alt="Stop Icon">
</button>
<div class="player__progress">
<input type="range" class="player__timeline" min="0" max="100" value="0">
<span class="player__duration"></span>
</div>
<button type="button" class="player__pip" aria-label="Picture-in-Picture">
<img src="${pipIcon}" alt="Picture-in-Picture Icon">
</button>
<div class="player__sound">
<img src="${volumeIcon}" class="player__mute" alt="Volume Icon">
<input type="range" class="player__volume" min="0" max="100" value="100">
</div>
</div>
</div>
`;
const player = document.querySelector('.player');
const play = player.querySelector('.player__play');
const playImg = play.querySelector('img');
const stop = player.querySelector('.player__stop');
const media = new Audio(autumnMp3);
const timeline = player.querySelector('.player__timeline');
const duration = player.querySelector('.player__duration');
const volume = player.querySelector('.player__volume');
const volumeToggle = player.querySelector('.player__mute');
const pip = player.querySelector('.player__pip');
let totalDuration;
const toggleMediaStatus = () => {
if (media.paused) {
media.play();
playImg.src = pauseIcon;
} else {
media.pause();
playImg.src = playIcon;
}
};
const stopMedia = () => {
media.pause();
media.currentTime = 0;
playImg.src = playIcon;
};
const getTime = (duration) => {
const time = parseInt(duration.toFixed(), 10);
const minutes = `${parseInt(time / 60)}`.padStart(2, 0);
const seconds = `${time % 60}`.padStart(2, 0);
return `${minutes}:${seconds}`;
};
const setInitialDuration = (e) => {
totalDuration = getTime(e.target.duration);
duration.innerText = `00:00 / ${totalDuration}`;
};
const setDuration = (e) => {
const currentDuration = getTime(e.target.currentTime);
const progress = (e.target.currentTime / e.target.duration) * 100;
timeline.value = progress;
duration.innerText = `${currentDuration} / ${totalDuration}`;
};
const skipToPosition = (e) => {
const position = parseInt(e.target.value, 10) / 100;
media.currentTime = media.duration * position;
};
const setVolume = (e) => {
const position = parseInt(e.target.value, 10) / 100;
media.volume = position;
volumeToggle.src = media.volume > 0 ? volumeIcon : volumeMuteIcon;
};
const toggleVolume = () => {
const isMuted = media.volume === 0;
volumeToggle.src = isMuted ? volumeIcon : volumeMuteIcon;
volume.value = isMuted ? 100 : 0;
volume.dispatchEvent(new Event('input'));
};
play.addEventListener('click', toggleMediaStatus);
stop.addEventListener('click', stopMedia);
media.addEventListener('durationchange', setInitialDuration);
media.addEventListener('timeupdate', setDuration);
media.addEventListener('ended', stopMedia);
timeline.addEventListener('input', skipToPosition);
volume.addEventListener('input', setVolume);
volumeToggle.addEventListener('click', toggleVolume);
const initPictureInPicture = () => {
pip.addEventListener('click', () => {
if (!document.pictureInPictureElement) {
media.requestPictureInPicture();
} else {
document.exitPictureInPicture();
}
});
media.addEventListener('enterpictureinpicture', () => {
console.log('Entered PiP');
});
media.addEventListener('leavepictureinpicture', () => {
console.log('Left PiP');
});
};
if ('pictureInPictureEnabled' in document) {
initPictureInPicture();
}
相关文章
- js把HTML转成对象,将js对象转换为html「建议收藏」
- html制作图片幻灯片效果代码,【JS+CSS3】实现带预览图幻灯片效果的示例代码
- HTML添加背景图片_html背景图片铺满网页
- 每日分享html之1个卡片选择、2个加载、1个背景、1个开关
- 使用openffice通过html生成pdf,变量无法找到并替换问题
- HTML制作简单的页面[通俗易懂]
- 完整html网页代码_css长度单位
- HTML制作网页_手机制作html网页
- 前端面试之HTML && CSS
- 整理一下以前的Html+css3复习笔记详解编程语言
- 简单构建HTML页面,连接MySQL数据库(html连接mysql)
- jquery与php的HTML转义与反转义详解编程语言
- MySQL与HTML的无缝连接(html与mysql连接)
- 文件Linux查看HTML文件的简单方法(linux查看html)
- 从 HTML 页面访问 MySQL 数据库.(html访问mysql)
- 文档为何使用Linux创建HTML文档?(linux创建html)
- Linux下学习HTML:从零开始(linuxhtml)
- HTML <q> 标签
- HTML与Oracle新的组合引发了新的机遇与挑战(html oracle)
- HTML表单元素覆盖样式元素问题及其补救之道
- Javascript访问html页面的控件的方法详细分析
- php正则过滤html标签、空格、换行符的代码(附说明)
- 去除HTML标签删除HTML示例代码
- js使用html()或text()方法获取设置p标签的显示的值
- 在ASP中不用模板生成HTML静态页直接生成.html页面