PC浏览器用ckplayer 播放m3u8视频，hls点播功能的简单实现

最新推荐文章于 2024-08-22 06:34:27 发布

明夕何夕wx

最新推荐文章于 2024-08-22 06:34:27 发布

阅读量1.2w

点赞数 3

分类专栏： html 文章标签： m3u8 视频点播 html html5 hls

本文链接：https://blog.csdn.net/weixin_42524279/article/details/84572876

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

其余的video.js,jwplayer.js,好像都只能用于直播流，或者说流播放，害我花两天时间研究测试他们，倒是成功了几个直播的小测试，进入正题

资源：ckplayer.js,直接去官方下载最新版：http://www.ckplayer.com/
里面有
里面有演示，找到你要用的事例就好,会有详细代码
页面代码：会用到hls.js，下载完整的ckplayer.js是包含有的，自动引用，页面中不用引用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- <script type="text/javascript" src="ckplayer/x/ckplayer.js"></script>-->
    <script src="static/ckplayer/ckplayer.js"></script>
</head>
<body>

    <div class="video" style="width: 1000px;height: 600px;"></div>
    <script type="text/javascript">
        var videoObject = {
            container: '.video',//“#”代表容器的ID，“.”或“”代表容器的class
            variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
            autoplay: false,
            html5m3u8: true,
            //video:'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/ckplayer-sample/m3u8/cd/index.m3u8'//视频地址
            video: 'http://192.168.3.138:5052/static/hls/one.m3u8'        
        };
        var player = new ckplayer(videoObject);
    </script>
</body>
</html>

需要放到站点中运行
然后是切m3u8视频，用ffmepg切视频，至于ffmepg的安装自己去搜索，很简单，打开cmd，用命令切
1.先转换成ts，也可以直接切

ffmpeg -y -i D:\video\one.mkv -vcodec copy -acodec copy -vbsf h264_mp4toannexb D:\video\hls\test.ts

2.再把ts切成片，应该有更直接的命令还没有去研究，路径自己换

ffmpeg -i D:\video\hls\test.ts -c copy -map 0 -f segment -segment_list D:\video\hls\one.m3u8 -segment_time 5 D:\video\hls\one-%03d.ts

在这里插入图片描述
然后把切好的文件放到你的站点里面，用http://192.168.3.138:5052/static/hls/one.m3u8就可以测试播放了

明夕何夕wx

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录