• 那是云首页
  • 快捷导航
  • 更多
    设为首页收藏本站
  • |
花生壳

移动设备H5点播web前端 HLS(动态码率自适应)

群晖 Synology  / 教程分享  / 正序浏览   © 著作权归作者本人所有

#楼主# 2018-7-25 08:55

跳转到指定楼层
本帖最后由 yangzfan 于 2018-7-25 09:12 编辑

      主要用于移动终端的音视频服务。包括一个m3u(8)的索引文件,TS媒体分片文件和web页面。
      利用FFMPEG开源编码工具切片,并精简到转码、索引、切片一键完成。
代码如下:
ffmpeg -i xxx.mp4 -c:v libx264 -vf scale=1920:-1 -r 23.97 -c:a copy -hls_list_size 0 -hls_time 3 -f hls xxx.m3u8

参数解释:
使用x264编码转换为分辨率为1920*1080,23.97帧并切片,每片为3秒,不指定片数。

然后利用H5的VEDIO标签解决视频直播流播放,代码如下:
<video class="vjs-tech" width="100%" height="100%"
    controls="controls" autoplay="autoplay"
    x-webkit-airplay="true" x5-video-player-fullscreen="true"
    preload="auto" playsinline="true" webkit-playsinline
    x5-video-player-typ="h5">
    <source type="application/x-mpegURL" src="URLXXX.m3u8">
</video>
OK,就是这么简单。。。。不过自己研究时候废了不少时间,这里共享出来供参考。


那是云论坛 - 国内知名的NAS交流平台
http://www.nasyun.com
分享淘帖
回复 印象

使用道具

0

精华

64

回帖

980

积分

入门用户

Rank: 1

云币
0
贡献
41
活跃
743
精华
0
love0849 发表于 2018-7-26 14:07 来自 中国四川成都
看不懂呀!
回复 印象

使用道具 举报

0

精华

103

回帖

2833

积分

搞机大神

Rank: 3Rank: 3

云币
0
贡献
255
活跃
1503
精华
0
yangzfan 发表于 2018-7-25 14:20 来自 中国湖北武汉
好像某一些安卓设备会有卡顿现象,那么这样情况下只有调用video-js播放器来解决。

调用video-js插件代码如下:

<video id="example-video" width=100% height=100% class="video-js vjs-default-skin" controls>
    <source src="rulxxx.m3u8" type="application/x-mpegURL">
</video>
<script src="/video-js/video.min.js"></script>
<script src="/video-js/videojs-contrib-hls.js"></script>
<script>
    var player=videojs('#example-video');
    player.play();
    videojs.options.flash.swf&#160;=&#160;"/video-js/video-js.swf";
</script>

调用video-js播放器后不会卡顿了。
回复 支持 反对 印象

使用道具 举报

0

精华

103

回帖

2833

积分

搞机大神

Rank: 3Rank: 3

云币
0
贡献
255
活跃
1503
精华
0
yangzfan 发表于 2018-7-25 14:20 来自 中国湖北武汉
好像某一些安卓设备会有卡顿现象,那么这样情况下只有调用video-js播放器来解决。

调用video-js插件代码如下:

<video id="example-video" width=100% height=100% class="video-js vjs-default-skin" controls>
    <source src="rulxxx.m3u8" type="application/x-mpegURL">
</video>
<script src="/video-js/video.min.js"></script>
<script src="/video-js/videojs-contrib-hls.js"></script>
<script>
    var player=videojs('#example-video');
    player.play();
    videojs.options.flash.swf&#160;=&#160;"/video-js/video-js.swf";
</script>

调用video-js播放器后不会卡顿了。
回复 支持 反对 印象

使用道具 举报

0

精华

103

回帖

2833

积分

搞机大神

Rank: 3Rank: 3

云币
0
贡献
255
活跃
1503
精华
0
yangzfan 发表于 2018-7-25 14:20 来自 中国湖北武汉
好像某一些安卓设备会有卡顿现象,那么这样情况下只有调用video-js播放器来解决。

调用video-js插件代码如下:

<video id="example-video" width=100% height=100% class="video-js vjs-default-skin" controls>
    <source src="rulxxx.m3u8" type="application/x-mpegURL">
</video>
<script src="/video-js/video.min.js"></script>
<script src="/video-js/videojs-contrib-hls.js"></script>
<script>
    var player=videojs('#example-video');
    player.play();
    videojs.options.flash.swf&#160;=&#160;"/video-js/video-js.swf";
</script>

调用video-js播放器后不会卡顿了。
回复 支持 反对 印象

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回列表 搜索 官方QQ群
懒人地图| 手机版|小黑屋| 智能生活 , 上那是云 |闽ICP备2020018196号-1 |网站地图