java后台 移动端 h5 播放m3u8

1.知识点 m3u8

m3u8 是一种基于 HTTP Live Streaming 文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成。目前 由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持,你可以直接通过
video.src = ‘xxx.m3u8’
来实现。
如果你希望兼容所有的浏览器的话, 你需要知道 Chrome 和 Firefox 支持的 Media Source Extensions( 非常不理想,在IE和国内具备兼容模式的极速浏览器下) 的情况:
目前 Youtube 和 Netflix 等主流视频网站,即使 FB 的 newsfeed 里面的视频也采用了 HLS 的解决方案,大致实现流程如下:
其核心,在于对于 m3u8 的文件解析和 通过 XHR 去完成对分片内容二进制文件的获取,然后使用 MSE 的 appendBuffer 去进行 buffer 的封装,然后自己完成合流的工作。

WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前以 HLS 为主(HLS存在延迟性问题,也可以借助 video.js 采用RTMP),PC端则以 RTMP 为主实时性较好
移动端 iOS 和 Android 都天然支持HLS协议,做好视频采集端、视频流推流服务之后,便可以直接在H5页面配置 video 标签播放直播视频, HLS 在 PC 端仅支持safari浏览器,类似chrome浏览器使用HTML5 video标签无法播放 m3u8 格式,可直接采用网上一些比较成熟的方案
移动端可直接通过 标签来播放 .m3u8 格式的视频:

优先推荐 video.js 的方案,因为它支持多个播放核心,而且插件非常多,你只需要使用videojs/videojs-contrib-hls(点击查看github) 就可以了。
思路2:H5视频播放之m3u8
用ffmpeg 把mp4文件转为ts文件并生成m3u8列表

2.问题

上传时,各种文件转成m3u8;
上传时,限制,只允许上传m3u8,自己用格式工厂传一下;
java后台,将各种格式的视频文件,转成m3u8,以便下载播放;

3.技术方案

参考文章:

java 实现视频转换通用工具类:视频相互转换-总方法及Mencoder(二)

java 实现视频转换通用工具类:视频相互转换-Ffmpeg(三)

4.测试链接

调试m3u8的时候需要测试地址 找了几个,备用一下

安徽卫视 http://stream2.ahtv.cn/ahws/cd/live.m3u8
经济生活 http://stream2.ahtv.cn/jjsh/cd/live.m3u8
影视频道 http://stream2.ahtv.cn/yspd/fd/live.m3u8
公共频道 http://stream2.ahtv.cn/ahgg/cd/live.m3u8
综艺频道 http://stream2.ahtv.cn/zypd/cd/live.m3u8
科教频道 http://stream2.ahtv.cn/kjpd/cd/live.m3u8
人物频道 http://stream2.ahtv.cn/rwpd/cd/live.m3u8
国际频道 http://stream2.ahtv.cn/ahgj/fd/live.m3u8

香港卫视 rtmp://live.hkstv.hk.lxdns.com/live/hks
香港卫视 http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: H5 M3U8技术是现代网页视频播放的重要组成部分,它通过将视频资源分成多个TS文件,再将TS文件链接起来,实现了流媒体的播放。而自动播放则是指在用户打开网页时无需手动点击播放按钮,视频自动开始播放。实现H5 M3U8自动播放需要掌握以下几个方面: 1. 利用JavaScript控制播放器,实现视频的自动播放。通过获取视频的控制对象,然后运用相关的API控制视频自动播放。 2. 在HTML代码中设置autoplay属性,让浏览器直接自动播放视频。该属性的值为true时自动播放,false则需要手动操作。 3. 借助各种H5视频播放器的优化参数,根据不同的使用场景进行不同的配置,提高播放器的性能和用户体验。 需要注意的是,在实现自动播放时需考虑到用户的意愿,不应在未经允许的情况下直接进行自动播放。此外,自动播放也会影响网页的加载速度和用户的流量消耗,因此需要综合考虑。 ### 回答2: 在当前的互联网时代,越来越多的人开始愿意使用H5 M3U8来进行视频播放。特别是对于那些有自己网站的人来说,H5 M3U8自动播放可以帮助他们更好地吸引观众,并且提高网站的流量,下面我们来详细了解一下H5 M3U8自动播放的方法。 首先,我们需要使用HTML5的标签,“video”来创建一个宽和高的视频播放器。接着,我们通过嵌入式的代码,添加播放列表M3U8的链接地址,并增加autoplay的属性值,使得视频能够在加载完成后立马自动播放。如下初始代码所示: ``` <video id="video" poster="video_poster.jpg" controls autoplay> <source src="http://sample.m3u8" type="application/x-mpegURL"> </video> ``` 这段代码在页面加载时会自动播放一个M3U8的视频,同时也设置了控制按钮,以方便用户操作。但是,很多浏览器现在默认都会阻止自动播放。因此,我们需要使用JavaScript代码,创建一个事件,来防止浏览器阻止自动播放行为。例如: ``` var video = document.getElementById('video'); video.addEventListener('touchstart', function () {     video.play(); }, false); ``` JavaScript代码中,我们给视频添加了一个监听事件,当我们使用触摸屏幕时,可以自动播放视频。这样,观众就可以在不需要点击播放按钮的情况下,直接观看视频。 此外,如果我们想让视频自动封面动画,我们还可以为视频添加CSS动画。如下: ``` @keyframes rotate{     0%{animation-transform: rotate(0deg);}     100%{animation-transform: rotate(360deg);} } video{animation: rotate 5s infinite linear;} ``` 通过这个代码,我们让视频自动播放的同时,还可以添加一个“旋转”的效果,提高用户的观赏体验,从而更好地吸引访问者。 总之,正确地使用H5 M3U8自动播放,可以使得网站更加吸引人,提高用户的体验,加强网站流量,效果非常显著。 ### 回答3: H5 M3U8自动播放是一种基于HTML5的视频播放技术,它对于视频网站和移动应用非常重要。 首先,需要了解的是,H5 M3U8自动播放是一种基于M3U8文件格式的视频播放方式。M3U8文件是由一系列指向其他音视频文件的地址组成的列表文件,这些地址指向不同质量的音视频流。因为H5支持M3U8格式的视频播放,因此H5 M3U8自动播放技术应运而生。 H5 M3U8自动播放技术主要由两个部分组成:一个是HTML5技术,包括HTML、CSS和JavaScript等代码实现,主要负责页面的布局和用户交互;另一个是M3U8流媒体传输技术,主要是通过HTTP协议来将视频分为多个小文件进行传输,从而提供流畅的视频播放体验。 在实现H5 M3U8自动播放技术时,需要使用一些开源的HTML5播放器库,例如Video.js、HLS.js等。这些开源库提供了简单易用的API和功能,包括播放、暂停、快进等等功能。 值得注意的是,H5 M3U8自动播放技术有一些限制,例如移动自动播放需要用户交互触发等。为了提供更好的用户体验,通常会在页面中添加一个播放按钮,用户点击按钮后才能开始播放。 总之,H5 M3U8自动播放技术是一种基于HTML5的视频播放技术,它对于视频网站和移动应用非常重要。需要使用开源的HTML5播放器库实现,为了提供更好的用户体验通常需要添加播放按钮。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不对法

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值