h5如何播放flv格式的视频

最新推荐文章于 2025-05-01 10:02:51 发布

嘻嘻嘻嘻嘻喜喜

最新推荐文章于 2025-05-01 10:02:51 发布

阅读量1w

点赞数 2

分类专栏： H5 文章标签： javascript

本文链接：https://blog.csdn.net/objectking/article/details/104099667

版权

H5 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在网页中播放FLV格式视频的方法，通过判断文件类型并利用flv.js库实现FLV视频的播放。文章提供了实际项目中的代码片段，包括页面引入、文件后缀获取、文件类型判断及播放器创建等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我看到好多网上全是让你下载的，我按照他们的步骤打包好了，我心你想。你直接给我把打包好的文件共享一下。不就好了吗？
打包文件在最下面

直接上代码吧

这都是实际项目里面的，不是demo。所以不能展示全部代码。。。我尽量把注释写清楚

页面引入

    <script src="../js/flv.min.js"></script>

1.html页面代码

 <video id="video" controls="controls" muted>
                   
  </video>

2.获取上传文件后缀

function getSuffix(filename) {
                return /\.[^\.]+$/.exec(filename)   
            };

3.判断上传文件是否是flv格式，如果是flv 则利用flv.js。

 if (getSuffix(data.information_file)[0] == '.flv') {
                            if (flvjs.isSupported()) {
                                var videoElement = document.getElementById('video');
                                var flvPlayer = flvjs.createPlayer({
                                    type: 'flv',
                                    url: httpImg + data.information_file
                                });
                                //url: xxx 为后台请求数据的视频
                                flvPlayer.attachMediaElement(videoElement);
                                flvPlayer.load();
                                // flvPlayer.play();
                                // $('.video-img').hide();
                            }
                        } else {
                            html += `  
                                    <source src="${httpImg + data.information_file}" type="video/ogg">
                                    <source src="${httpImg + data.information_file}" type="video/mp4">  
                            `
                            $('#video').html(html);
                        }