mp4转m3u8 格式视频

写在前面的话

为什么要播放 m3u8 格式的视频

1.对于一个小视频来说,理论上直接播放 mp4 的本地文件即可

2.但如果将网站部署到云上,其他用户通过网址访问时,想要看到这个视频,就需要先完整的下载格式为 mp4 的视频文件

3.当视频文件下载完成后,网站才可以播放该视频,这就对于用户体验是极大的下降


正规项目一般如何处理

1.对于一个大型项目来说,一般会视频会使用流媒体播放器来播放视频

2.例如阿里云的流媒体播放器,则是将所有视频存储到阿里云的流媒体服务器

3.网页端通过阿里云为每个视频提供的 VID 来访问视频

4.这首先需要在网页端继承一个流媒体播放器,同时还需要后端对接阿里云服务端,来获取视频的鉴权地址

5.带来的好处是可以保证视频资源相对安全,降低被人直接盗取的可能性

6.缺点则是对接起来过于繁琐,在小项目上显得得不偿失

7.具体对接步骤可参考Java + jQuery 实现阿里云点播


小项目可以如何快速操作

1.可以使用 FFmpeg 将普通的 mp4 格式的视频文件转换为 m3u8 格式

2.再使用 Video.js: 播放转码后的视频

参考网址

1.前端video标签播放m3u8格式视频 - CSDN

2..网站播放视频较慢,利用mp4转m3u8解决 - 简书


实现步骤

下载视频转码工具 FFmpeg

前往FFmpeg Download下载对应版本的工具

该工具不需要安装,是通过命令行运行的

win10 - 64位

链接:https://pan.baidu.com/s/1c9-YSm7e0kgeUl4u0vYYeg

提取码:cryn


需要注意的一点:如果是 Mac 用户,可能会尝试使用 Homebrew 安装,这里需要说的是 “可以,但是没必要”

因为如果通过 Homebrew 安装,会自动安装一堆依赖文件,而且最后工具可能还安装失败

关键是该工具的使用不需要做任何系统配置,直接前往执行文件目录执行对应命令即可

所以完全没必要通过 Homebrew 安装到系统中


使用 FFmpeg 对视频进行转码

1.下载成功并解压后的目录入下图


2.打开终端,进入到上图文件中的目录



3. 为了操作简单,将待转码的视频放在D:\video(D盘里新建一个video文件夹)




4. 在终端执行如下命令( 二选一 )

第一种转换命令

#转mp4为ts

ffmpeg -y -i D:\video\video.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb D:\videos\a.ts

第二种转换命令

#一次性完成转换和切片,切片时长为60秒

ffmpeg -i D:\video\video.mp4 -c:v libx264 -hls_time 60 -hls_list_size 0 -c:a aac -strict -2 -f hls D:\videos\zxcu.m3u8



5.这个时候视频转换就完成了

需要注意的是上述生成的两类文件(m3u8和ts)需要保存在一起

将转码后的视频文件放置到服务器中

1.需要注意的是,m3u8 格式的文件无法像 mp4 一样通过相对/绝对路径进行访问

2.必须将其放置在某个服务器中,然后通过链接进行访问

3.而且需要再次强调的是,video.m3u8video0.ts两个文件必须放置在同一个目录中

4.具体是放置在 Nginx ,还是 Tomcat 这个随意,毕竟我们的静态网站要部署,实际上也需要依托服务器

5.可以将视频文件放置于网站相同的服务器中,只需要指定网址 + 目录即可

6. 如果使用vue来播放m3u8视频,会产生跨域(请用Nginx 代理跨域)



前端video标签播放m3u8格式视频

以下是全部代码:


<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>前端播放m3u8格式视频</title>

    <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">

    <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>

    <!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->

</head>

<body>

    <style>

        .video-js .vjs-tech {position: relative !important;}

    </style>

    <div>

        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>

            <source id="source" src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8" type="application/x-mpegURL"></source>

        </video>

    </div>

    <div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div>

</body>


<script>

    // videojs 简单使用

    var myVideo = videojs('myVideo', {

        bigPlayButton: true,

        textTrackDisplay: false,

        posterImage: false,

        errorDisplay: false,

    })

    myVideo.play()

    var changeVideo = function (vdoSrc) {

        if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式

            myVideo.src({

                src: vdoSrc,

                type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值

            })

        } else {

            myVideo.src(vdoSrc)

        }

        myVideo.load();

        myVideo.play();

    }

    var src = 'http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8';

    document.querySelector('.qiehuan').addEventListener('click', function () {

        changeVideo(src);

    })

</script>




前端Vue插件播放m3u8格式视频

参考文档: https://github.com/langyuxiansheng/vue-aliplayer-v2



参考文献

https://www.cnblogs.com/li1992/p/11316008.html

//www.greatytc.com/p/eb5cd63647c3

https://blog.csdn.net/qq_30282133/article/details/81566273






















前端video标签播放m3u8格式视频

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348