flv播放器 - 超级灌水

flv播放器

我没K

@Ta 2022-06-22发布，2022-06-22修改 188点击

<div style="width:100%;height:100%;margin:0px;background:#000;position:fixed;top:0px;left:0px;display:block;z-index:1"><video src="" id="live"></video></div>

<script src="https://cdn.bootcss.com/flv.js/1.3.3/flv.min.js"></script>


<script>
if (flvjs.isSupported()) 
{
var videoElement =document.querySelector('#live');     
   var flvPlayer = flvjs.createPlayer(
{
            type: 'flv',
            url: 'http://gros.com/vod.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
}
} 
</script>

这个虽然能播放flv，但是我想让video那里直接播放flv，有没有什么代码可以实现么？

@我没K，这样可以

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>FLV播放测试</title>
<script src="https://hu60.cn/tpl/jhin/js/flv.js/flv.min.js"></script>
<script src="https://hu60.cn/tpl/jhin/js/hls.js/hls.min.js"></script>
<script>
    // 添加 flv/m3u8 播放支持
    function loadVideoExtension(e) {
        const video = e.target;
        console.log(video);
        video._tryExt = true;
        const url = video.src;
        if (/\.flv\b/i.test(url) && !video.canPlayType("video/x-flv") && !video._flvJSLoaded) {
            // 尝试通过 flv.js 播放
            video._flvJSLoaded = true;
            var flvPlayer = flvjs.createPlayer({
                type: "flv",
                url: url
            });
            flvPlayer.attachMediaElement(video);
            flvPlayer.load();
        } else if (/\.m3u8\b/i.test(url) && Hls.isSupported()) {
            // 尝试通过 hls.js 播放
            const hls = new Hls();
            hls.loadSource(url);
            hls.attachMedia(video);
        }
    }
</script>
</head>
<body>
    <video src="https://file.hu60.cn/file/hash/flv/93d8ed8312bdad079f552898db3cd50e8817108.flv" controls></video>
    <script>
        document.querySelectorAll('video').forEach(x => x.onerror = loadVideoExtension);
    </script>
</body>
</html>

老虎会游泳

@Ta / 2022-06-22 / 样 / 源

@我没K，不太成功，等我修改。

修改好了。https://dev.hu60.cn/download/flvjs.html

注意必须像一楼那样loadVideoExtension函数在<head>里，document.querySelectorAll('video')在<body>的底部。

huaruan

@Ta / 2022-06-23 / 样 / 源

看到你的贴子，我连夜做了一个播放测试案例：https://www.zngg.net/tool/detail/FlvPlayer 代码是开源的，可以看我上一个帖子

huaruan

@Ta / 2022-06-24 / 样 / 源

@我没K，我下面有说明无法播放m3u8，最近会添加专用的m3u8播放器或者这个兼容m3u8播放

回复列表(8|隐藏机器人聊天)

2

老虎会游泳

@Ta / 2022-06-22 / 样 / 源

@我没K，不太成功，等我修改。

修改好了。https://dev.hu60.cn/download/flvjs.html

注意必须像一楼那样loadVideoExtension函数在<head>里，document.querySelectorAll('video')在<body>的底部。
3

我没K

@Ta / 2022-06-22 / 样 / 源

@老虎会游泳，谢谢，，我是播放CCTV直播源，都是flv格式的，这样方便多了
4

huaruan

@Ta / 2022-06-23 / 样 / 源

看到你的贴子，我连夜做了一个播放测试案例：https://www.zngg.net/tool/detail/FlvPlayer 代码是开源的，可以看我上一个帖子
5

我没K

@Ta / 2022-06-23 / 样 / 源

@huaruan，m3u8手机可以播放，电脑不行
6

huaruan

@Ta / 2022-06-24 / 样 / 源

@我没K，我下面有说明无法播放m3u8，最近会添加专用的m3u8播放器或者这个兼容m3u8播放
7

皮皮虎

@Ta / 2022-06-25 / 样 / 源

你是拿来看cctv直播吗？我都不好意思点破你 @我没K
8

huaruan

@Ta / 2022-06-25 / 样 / 源

@皮皮虎，愿闻其详

添加新回复

回复需要登录。