码迷,mamicode.com
首页 > 其他好文 > 详细

hls流媒体视频防盗实现

时间:2017-09-29 01:37:37      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:分享   html   内容   css   代码   codec   点击   网址   更改   

 HLS流媒体视频防盗实现

一、Windows安装FFmpeg

1.1 安装版本

1.1.1 网址:https://ffmpeg.org/

1.1.2 选择Windows版本:https://ffmpeg.org/download.html#build-windows

 技术分享

技术分享

 

1.2 解压安装:

1.2.1 下载并解压FFmpeg文件夹,它会生成一个类似名为“ffmpeg-20150504-git-eb9fb50-win32-static”的新文件夹:

    技术分享

 

1.2.2 打开你想安装的任意磁盘,例如:d盘。新建一个名为“ffmpeg”的文件夹,将第二步解压生成的文件夹中的内容全部拷贝到“ffmpeg”文件夹中:

    技术分享

 

1.3配置FFmpeg环境变量:

1.3.1 点击开始菜单,再点击控制面板,再点击系统与安全,再点击系统,然后点击高级系统设置,跳出系统属性窗口后,最后点击环境变量按钮:

   技术分享

 

1.3.2 点击环境变量按钮后,跳出环境变量窗口,找到并选中“Path”变量,点击编辑:

   技术分享

 

1.3.3 “Path”变量原有变量值内容上加上“;d:\ffmpeg\bin”(注:;代表间隔,不可遗漏;d:\ffmpeg\bin代表FFmpeg的安装路径下的bin文件夹),一路点击确定即可。

   技术分享

 

1.3.4 打开命令提示符窗口。输入命令“ffmpeg  –version”。如果命令提示窗口返回FFmpeg的版本信息,那么就说明安装成功了,你可以在命令提示行中任意文件夹下运行FFmpeg

   技术分享

 

二、ffmpeg对mp4文件进行ts切片并生成m3u8文件

2.1 先用ffmpeg把abc.mp4文件转换为abc.ts文件:

ffmpeg -y -i abc.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb abc.ts

    技术分享

2.2 再用ffmpeg把abc.ts文件切片并生成playlist.m3u8文件,10秒一个切片:

ffmpeg -i abc.ts -c copy -map 0 -f segment -segment_list playlist.m3u8 -segment_time 10 abc%03d.ts

   技术分享

2.3 生成切片结果

 技术分享

三、将生成的m3u8文件在Pc端和移动端均正常播放

3.1 引入视频直播插件

GitHub地址:https://github.com/daipianpian/hLive

##基于videojs的视频直播播放器 演示地址 ####引入相应js和css,在页面添加相应播放器代码既可解析播放m3u8格式直播流,播放器格式如下

 

demo中source视频路径为本地src文件夹下测试视频,根据自己需求进行更改

       <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1000" height="500" data-setup=‘{}‘>

              <source src="./src/z.m3u8" type="application/x-mpegURL">

       </video>

 

3.2 本地demo

3.2.1 文件结构:

   技术分享

 

3.2.2 核心代码:

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1000" height="500"

  data-setup=‘{}‘>

    <source src="video/playlist.m3u8" type="application/x-mpegURL">

  </video>

3.2.3 实现效果:

PC端:

   技术分享

 

移动端:

 技术分享

 

hls流媒体视频防盗实现

标签:分享   html   内容   css   代码   codec   点击   网址   更改   

原文地址:http://www.cnblogs.com/daipianpian/p/7609156.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!