前端视频播放的几种方式 (主要实时播放)
快乐小王呀 2024-08-03 08:03:02 阅读 50
HTML5 的 video 标签:这是最直接的方式,可以直接在 HTML 中使用 video 标签来展示视频。
<code><video width="320" height="240" controls>code>
<source src="movie.mp4" type="video/mp4">code>
<source src="movie.ogg" type="video/ogg">code>
</video>
2.使用视频播放库:例如 Video.js、Plyr 等,这些库提供了丰富的 API 和自定义选项,可以满足更复杂的需求
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />code>
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>code>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264">code>
<source src="MY_VIDEO.mp4" type="video/mp4" />code>
<script>
var player = videojs('my-video');
</script>
3.实时播放
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
var video = document.getElementById('video');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('http://example.com/path/to/stream.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
//如果浏览器不支持 hls.js,但支持直接播放 HLS 流(例如 Safari),则直接将 video 元素的 src 属性设置为 HLS 流的 URL,并在元数据加载完成后开始播放视频。
video.src = 'http://example.com/path/to/stream.m3u8';
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
</script>
4.以下是一个使用 flv.js 播放 FLV 视频的例子:
FLV 格式支持流媒体,这意味着用户可以在下载完整个视频文件之前开始播放视频。这对于在线视频播放非常重要。FLV 格式支持多种编码
FLV 格式也有一些缺点。例如,FLV 格式的视频文件通常比其他格式(如 MP4)大,这可能会导致更长的加载时间和更高的带宽消耗。此外,由于 Adobe 已经停止对 Flash Player 的支持,FLV 格式的视频在现代浏览器中的播放支持可能会逐渐减少。
<script src="https://cdn.jsdelivr.net/npm/flv.js@1/dist/flv.min.js"></script>
<video id="videoElement"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://example.com/path/to/video.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。