Video 标签播放 m3u8 格式视频
在不借助流媒体播放器的前提下,直接播放 m3u8 格式的视频文件
更多精彩
- 更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线
写在前面的话
为什么要播放 m3u8 格式的视频
- 对于一个小视频来说,理论上直接播放 mp4 的本地文件即可
- 但如果将网站部署到云上,其他用户通过网址访问时,想要看到这个视频,就需要先完整的下载格式为 mp4 的视频文件
- 当视频文件下载完成后,网站才可以播放该视频,这就对于用户体验是极大的下降
正规项目一般如何处理
- 对于一个大型项目来说,一般会视频会使用流媒体播放器来播放视频
- 例如阿里云的流媒体播放器,则是将所有视频存储到阿里云的流媒体服务器
- 网页端通过阿里云为每个视频提供的 VID 来访问视频
- 这首先需要在网页端继承一个流媒体播放器,同时还需要后端对接阿里云服务端,来获取视频的鉴权地址
- 带来的好处是可以保证视频资源相对安全,降低被人直接盗取的可能性
- 缺点则是对接起来过于繁琐,在小项目上显得得不偿失
- 具体对接步骤可参考 Java + jQuery 实现阿里云点播
小项目可以如何快速操作
- 可以使用 FFmpeg 将普通的 mp4 格式的视频文件转换为 m3u8 格式
- 再使用 Video.js: 播放转码后的视频
参考网址
- 前端video标签播放m3u8格式视频 - CSDN
- 网站播放视频较慢,利用mp4转m3u8解决 - 简书
实现步骤
下载视频转码工具 FFmpeg
- 前往 FFmpeg Download 下载对应版本的工具
- 该工具不需要安装,是通过命令行运行的
- 需要注意的一点:如果是 Mac 用户,可能会尝试使用 Homebrew 安装,这里需要说的是 “可以,但是没必要”
- 因为如果通过 Homebrew 安装,会自动安装一堆依赖文件,而且最后工具可能还安装失败
- 关键是该工具的使用不需要做任何系统配置,直接前往执行文件目录执行对应命令即可
- 所以完全没必要通过 Homebrew 安装到系统中
使用 FFmpeg 对视频进行转码
- 下载成功并解压后的目录入下图
- ffmpeg 就是执行命令
- ffmpeg 就是执行命令
- 打开终端,进入到上图文件中的目录
- 为了操作简单,将待转码的视频直接复制到该目录下
- 可以看到下图中多了一个 video.mp4 文件
- 可以看到下图中多了一个 video.mp4 文件
- 在终端执行如下命令
./ffmpeg -i ./video.mp4 -c:v libx264 -hls_time 60 -hls_list_size 0 -c:a aac -strict -2 -f hls ./video.m3u8
- 执行完成之后会在当前目录多出 video.m3u8 和 video0.ts 文件,如下图
- 这个时候视频转换就完成了
- 需要注意的是上述生成的两个文件需要保存在一起
将转码后的视频文件放置到服务器中
- 需要注意的是,m3u8 格式的文件无法像 mp4 一样通过 相对/绝对 路径进行访问
- 必须将其放置在某个服务器中,然后通过链接进行访问
- 而且需要再次强调的是,video.m3u8 和 video0.ts 两个文件必须放置在同一个目录中
- 具体是放置在 Nginx ,还是 Tomcat 这个随意,毕竟我们的静态网站要部署,实际上也需要依托服务器
- 可以将视频文件放置于网站相同的服务器中,只需要指定 网址 + 目录 即可
下载视频播放器 Video.js
- 前往 Getting Started with Video.js 可获取视频插件的 CDN 地址,或下载地址
- 推荐使用 CDN 地址,因为方便快捷
在项目中引入 Video.js 的 CSS/JS 文件
- 以下代码引入的是在线文件
...
<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"></script>
...
在项目中引入 Video 标签
- 可以看到以下代码中的视频文件是一个网址为前缀的链接
- 如果是本地调试的话,也可能是
http://127.0.0.1:8090/video/video.m3u8
- 如果是本地调试的话,也可能是
<video id="welcomeVideo" class="video-js vjs-default-skin"><source id="source" src="http://www.asing1elife.com/video/video.m3u8" type="application/x-mpegURL" />
</video>
初始化 Video.js
- 具体参数如何使用,可以参考 Tutorial: options | Video.js Documentation
<script>var myVideo = videojs('welcomeVideo', {loop: true,controls: false,preload: 'auto',autoplay: true})
</script>
Video 标签播放 m3u8 格式视频相关推荐
- video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过 编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般 ...
- video插件播放m3u8格式视频(存原生)
video插件播放m3u8格式视频(存原生) 这里使用原生的javascript实现m3u8格式视频播放. 使用了包括video.min.js库和HLS插件. 1-基础使用 <!DOCTYPE ...
- uniapp H5 项目 播放 m3u8格式视频
uniapp H5 项目 播放 m3u8格式视频 阐述 在项目中,可能会获取一些直播流地址,比如最常见的就是.m3u8视频格式.在小程序可以直接使用video 标签就可以直接播放,因为小程序有自己的引 ...
- 微信端iphone 使用video标签播放不了视频
Source标签用于给媒体(因为audio标签同样可以包含此标签,所以这儿用媒体,而不是视频)指定多个可选择的(浏览器最终只能选一个)文件地址,且只能在媒体标签没有使用src属性时使用. 问题:微信端 ...
- srs服务器播放文件,使用SRS+ffmpeg搭建流媒体服务器播放m3u8格式视频
1.简介 srs是一个简单的流媒体开源直播软件,ffmpeg是完整的跨平台解决方案,用于记录,转换和流传输音频和视频. 2.相关 官网下载页面:点击我到达 在线演示播放页面:点击我到达 Git页面:点 ...
- vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频(一)
vue使用原生video播放m3u8格式的视频 1.安装依赖 2.页面引入插件(这里我是页面单独引入,减少项目体积) 3.页面中的使用 常见问题 4.实现过程 5.实现.m3u8格式视频播放方法 1. ...
- Android播放M3U8格式视频失败
一.背景 Android使用Ijkplayer播放m3u8图片格式的视频失败IOS没问题,当我们使用自定义播放器播放后端给的一个视频地址时,正常直接把播放链接丢到播放器里即可,但是m3u8格式视频比较 ...
- IPhone微信H5用Video标签播放不了视频
H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#) 转载于:https://w ...
- androidTV在html中集成饺子播放器并播放m3u8格式视频
饺子播放器的默认引擎是MediaPlayer,只能播放一些常见格式的视频.想要播放m3u8格式,需要切换引擎 jzvdStd.setUp("http://youku.cdn-iqiyi.co ...
最新文章
- 25 进程同步之Event
- Android应用程序请求SurfaceFlinger服务渲染Surface的过程分析
- 三维重建13X-2:FCN和MaskRCNN中Mask的获取
- 红包雨效果html,js+css实现红包雨效果
- bl小说里面有个机器人管家_5G无人扫地机器人+进口吸扫一体机 杭州环卫工装备升级了...
- 编程细节 —— 按值传递、按引用传递(final、const)
- 挂***方法和技巧大汇总
- NeHe OpenGL教程(中文版附源代码)
- python源码保护之cython
- Java web server 之 Jetty
- 基于selenium的python模拟登陆虎牙发送弹幕并截取主播头像
- 【SuperResolution】Spatial resolution的含义
- 如何用Matlab求不定积分
- 计算机经典书籍介绍及下载站点
- 印象笔记、为知笔记、有道云笔记使用比较
- NAPI之(一)——原理和实现
- 400万像素摄像头,你还在用百兆交换机吗?
- Toad 中的compare使用方法
- 希尔伯特黄变换matlab,HHT变换的三种方法 Matla
- 【第三方OA对接】03 企业微信对接项目总结