ffmpeg视频转切片m3u8并加密videojs播放hls.js播放dplayer播放（弹幕效果）

2024-08-30 23:52
文章标签 视频 切片 加密 ffmpeg js 效果 播放 hls 弹幕 m3u8 videojs dplayer

本文主要是介绍ffmpeg视频转切片m3u8并加密videojs播放hls.js播放dplayer播放（弹幕效果），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 学习链接
  • 步骤
    • 安装openssl
    • 生成一个enc.key文件
    • 生成加密串
    • 创建enc.keyinfo文件
    • 视频切分
      • m3u8文件
    • web前端查看m3u8视频
      • 后台返回enc.key的接口
      • videojs播放m3u8视频
    • 其它
      • videojs切换播放视频
      • hls.js切换播放视频
      • dplayer切换播放视频(弹幕)

学习链接

Java实现视频加密及播放

使用ffmpeg视频切片并加密

mp4视频分片生成m3u8流文件并加密

html中 videojs 播放m3u8文件【方式一】
html中 DPlayer 播放m3u8文件【方式二】

vue播放播放M3U8格式——HLS的直播流

Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）

vue中使用video标签播放MP4，m3u8格式视频

步骤

安装openssl

参考：Security OAuth2 授权 & JWT 中安装openssl部分、安装OpenSSL

下载 openssl安装包，一般下载列表第1个EXE即可(不带light的是完整功能的安装包，我们用不到)，下载完成后双击安装一直点下一步就行了。在这里插入图片描述
配置环境变量，老生常谈，openssl的默认安装路径为C:\Program Files\OpenSSL-Win64\bin，这里有windows配置环境变量的通用教程，最后我们验证下是否配置成功openssl -v 或者 openssl version。

在这里插入图片描述

centos7安装openssl：sudo yum install pcre-devel openssl openssl-devel -y

生成一个enc.key文件

生成一个enc.key文件，license与windows指令相同
在这里插入图片描述

生成加密串

生成加密串（b6dc7333568a0deef8e6b331b9725264），记下来
在这里插入图片描述

创建enc.keyinfo文件

新建一个文件 enc.keyinfo 内容格式如下：

Key URI            # enc.key的路径，使用http形式
Path to key file   # enc.key文件
IV                 #  上面生成的iv

示例

http://localhost/video/enc.key
enc.key
b6dc7333568a0deef8e6b331b9725264

在这里插入图片描述

视频切分

视频切分，传一个test.mp4到enc.key路径下，通过黑窗口执行下面的指令

ffmpeg -y  -i test.mp4 -hls_time 12  -hls_key_info_file enc.keyinfo  -hls_playlist_type vod  -hls_segment_filename "file%d.ts"  playlist.m3u8
  • 解释
    ffmpeg -y \-i test.mp4 \-hls_time 12 \                       # 将test.mp4分割成每个小段多少秒-hls_key_info_file enc.keyinfo \-hls_playlist_type vod \             # vod 是点播，表示PlayList不会变
-hls_segment_filename "file%d.ts" \  #  每个小段的文件名playlist.m3u8                        #  生成的m3u8文件

在这里插入图片描述

m3u8文件

这个URI路径可以修改，只要能返回enc.key的数据就行了

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:50
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-KEY:METHOD=AES-128,URI="http://localhost/video/enc.key",IV=0xb6dc7333568a0deef8e6b331b9725264
#EXTINF:50.000000,
file0.ts
#EXTINF:50.000000,
file1.ts
#EXTINF:14.600000,
file2.ts
#EXT-X-ENDLIST

web前端查看m3u8视频

后台返回enc.key的接口

在这里插入图片描述

@Configuration
public class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").maxAge(3600).allowCredentials(true).allowedOrigins("*").allowedMethods("*").allowedHeaders("*").exposedHeaders("token","Authorization");}}

videojs播放m3u8视频

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title><!--Uses the latest versions of video.js and videojs-contrib-hls.To use specific versions, please change the URLs to the form:  --><link href="https://unpkg.com/video.js@5.16.0/dist/video-js.css" rel="stylesheet"><script src="https://unpkg.com/video.js@5.16.0/dist/video.js"></script><script src="https://unpkg.com/videojs-contrib-hls@4.1.1/dist/videojs-contrib-hls.js"></script></head>
<body><h1>Video.js Example Embed</h1><video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'><source src="./video/playlist.m3u8" type="application/x-mpegURL"></video></body>
</html>

当未提供enc.key的文件时，报错
在这里插入图片描述
直接修改m3u8的URI也是没问题的，只要后台改了就行
在这里插入图片描述

其它

videojs切换播放视频

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>videojs-contrib-hls embed</title><!--Uses the latest versions of video.js and videojs-contrib-hls.To use specific versions, please change the URLs to the form:  --><link href="https://unpkg.com/video.js@5.16.0/dist/video-js.css" rel="stylesheet"><script src="https://unpkg.com/video.js@5.16.0/dist/video.js"></script><script src="https://unpkg.com/videojs-contrib-hls@4.1.1/dist/videojs-contrib-hls.js"></script></head>
<body><h1>Video.js Example Embed</h1><video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'><source  src="./video1/playlist.m3u8" type="application/x-mpegURL"></video><hr><button id="video1" onclick="videoHandler(event)" data-videourl="./video1/playlist.m3u8">视频1</button><button id="video2" onclick="videoHandler(event)" data-videourl="./video2/index.m3u8">视频2</button><button id="video3" onclick="videoHandler(event)" data-videourl="http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8">失效的url</button><button onclick="pause()">暂停</button><button onclick="play()">播放</button><button onclick="destroy()">关闭</button><script>const playerOptions = {autoplay: false, // 自动播放controls: true, // 显示控制条errorDisplay: false, // 隐藏错误提示muted: true, // 静音sources: [{// src: "./video1/playlist.m3u8",src: "./video2/index.m3u8",type: "application/x-mpegURL",},],};var player = videojs(document.querySelector('#my_video_1'), playerOptions, () => {console.log("Video.js player is ready");})function videoHandler(e) {const videoUrl = e.target.dataset.videourl;player.src({src: videoUrl,type: "application/x-mpegURL",});player.load(); // 重新加载视频// player.play(); // }player.on("error", (event) => {console.error("Error:", event.error);player.src({src: './video2/index.m3u8',type: "application/x-mpegURL",});});player.on("play", (event) => {console.log('play', event); // 开始播放和每次点击播放进度条时都会触发});player.on("ended", (event) => {console.log('ended', event); // 播放结束});function pause() {player.pause(); // 暂停} function play() {player.play(); // 继续播放}function destroy() {player.dispose(); // 关闭 , video这个dom都被删除了player = null}</script></body>
</html>

hls.js切换播放视频

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head><body><video id="video" width="640" height="268" controls></video><hr /><button id="video1" onclick="videoHandler(event)" data-videourl="./video1/playlist.m3u8">视频1</button><button id="video2" onclick="videoHandler(event)" data-videourl="./video2/index.m3u8">视频2</button><button onclick="playVideo()">播放</button><button onclick="pauseVideo()">暂停</button>
</body>
<script>var video = document.getElementById('video');if (Hls.isSupported()) {// 可参考: // hls的github文档中的api：(https://github.com/video-dev/hls.js/blob/master/docs/API.md)// hls.js如何播放m3u8文件（实例）？(https://blog.csdn.net/ffffffff8/article/details/129314268)// Vue 之 视频流 - Hls.js(https://blog.csdn.net/a15297701931/article/details/115478652)let config = {xhrSetup: function (xhr, url) {xhr.withCredentials = true; // 会携带cookie// 在请求http://127.0.0.1:5500/video2/index.m3u8时会携带token请求头// 在请求http://127.0.0.1:5500/video2/index000.ts时会携带token请求头xhr.setRequestHeader('token', "my-token")},}var hls = new Hls(config);hls.on(Hls.Events.MANIFEST_PARSED, function () {console.log('MANIFEST_PARSED');// video.play(); // Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD});hls.loadSource('./video2/index.m3u8');hls.attachMedia(video);function playVideo() {video.play()}function pauseVideo() {video.pause()}function videoHandler(e) {console.log(e.target.dataset.videourl);hls.loadSource(e.target.dataset.videourl);hls.attachMedia(video);}}// HLS.js is not supported on platforms that do not have Media Source// Extensions (MSE) enabled.//// When the browser has built-in HLS support (check using `canPlayType`),// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video// element through the `src` property. This is using the built-in support// of the plain video element, without using HLS.js.else if (video.canPlayType('application/vnd.apple.mpegurl')) {video.src = videoSrc;}</script></html>

dplayer切换播放视频(弹幕)

  1. 可以切换视频，可以发送弹幕（发送完弹幕后，可以在本地显示，可以调用dp.danmaku.send(danmaku, callback: function): 提交一个新弹幕，后面可以使用websoket将代码发到其它观看此视频的用户）

  2. 必须引入DPlayer.min.css，否则弹幕无法正常显示

  3. 有个问题：按照官网设置的danmaku的token，但是在请求弹幕接口的时候没有携带这个请求头，不知道该问题的原因（哦，原来是发送弹幕的时候，会携带这个danmaku.token参数到Request Payload中，我还以为请求弹幕的时候，也得带呢）

  4. 弹幕的格式：每条弹幕都是1个数组，数组中按顺序依次是：time-时间，type-类型，color-颜色，author-发送者，text-内容

  5. 弹幕返回的示例可以参考，https://s-sh-17-dplayercdn.oss.dogecdn.com/1678963.json：

    {"code": 0,"data": [[230.523,0,16777215,"618c713c","键盘妹子挺好看？"],[25.837,0,16777215,"6b2884ac","Goose house炒鸡棒！！！  银之匙种草他们组合"],[235.243,1,16707842,"929815d3","刚才说比其他翻唱都好听的你是认真的么，这。就是原唱"],[86.841,0,16777215,"6f30afd1","喜欢短发的"]]
}

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;}.dplayer-container {width: 800px;height: 500px;border: 5px solid red;display: flex;align-items: center;justify-content: center;}#dplayer {width: 100%;height: 100%;object-fit: cover;border: 5px solid black;}</style><!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> --><!-- <script src="https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js"></script> --><link rel="stylesheet" href="./css/DPlayer.min.css"><script src="./js/hls.js"></script><script src="./js/dplayer.js"></script>
</head><body><div class="dplayer-container"><div id="dplayer"></div></div><hr /><button id="video1" onclick="videoHandler(event)" data-videourl="./video1/playlist.m3u8">视频1</button><button id="video2" onclick="videoHandler(event)" data-videourl="./video2/index.m3u8">视频2</button><button onclick="playVideo()">播放</button><button onclick="pauseVideo()">暂停</button><script>// 另一种方式，使用 customTypeconst dp = new DPlayer({container: document.getElementById('dplayer'),autoplay: false, // 自动播放video: {url: './video1/playlist.m3u8',type: 'customHls',pic: './soft-dev.png', // video的poster属性, 视频封面customType: {customHls: function (video, player) {let config = {xhrSetup: function (xhr, url) {xhr.withCredentials = true; // 会携带cookiexhr.setRequestHeader('token', "my-token")},}const hls = new Hls(config);hls.loadSource(video.src);hls.attachMedia(video);},},/* quality: [ // 清晰度{name: '标清哦',url: './video1/playlist.m3u8',type: 'customHls',},{name: '高清哦',url: './video2/index.m3u8',type: 'customHls',},],defaultQuality: 0, */},volume: 1, // 默认音量playbackSpeed: [0.5, 1, 1.25, 1.5, 2], // 可选的播放速率，可以设置成自定义的数组lang: 'zh-cn', // 显示为中文loop: true, // 是否循环播放hotkey: true, // 开启热键，支持快进、快退、音量控制、播放暂停screenshot: true, // 开启截图功能theme: 'orange', // 进度条颜色logo: 'naughty.gif', // 左上角logopreventClickToggle: false, // 阻止点击播放器时候自动切换播放/暂停contextmenu: [ // 右键视频时的菜单{text: 'custom1',link: 'https://github.com/DIYgod/DPlayer',},{text: 'custom2',click: (player) => {console.log(player);},},],highlight: [ // 视频进度条上的高亮点{time: 20,text: '这是第 20 秒',},{time: 60,text: '这是 1 分钟',},],danmaku: {id: './video1/playlist.m3u8',user: 'user1',token: 'tokendemo',// 这个api会发送1个请求: http://localhost:82/barrage/v3/?id=./video1/playlist.m3u8api: 'http://localhost:82/barrage/',    //这里填写弹幕地址 livewebaddition: ['https://s-sh-17-dplayercdn.oss.dogecdn.com/1678963.json']}});dp.danmaku.token = 'tokendemo';// 视频切换function videoHandler(e) {console.log(e.target.dataset.videourl);dp.switchVideo(// 指定视频设置{url: e.target.dataset.videourl,pic: '',},// 指定弹幕设置{id: e.target.dataset.videourl,api: 'http://localhost:82/barrage/',maximum: 3000,user: 'DIYgod',})}function playVideo() {dp.play()}function pauseVideo() {dp.pause()}Window.dp = dp;</script>
</body></html>

这篇关于ffmpeg视频转切片m3u8并加密videojs播放hls.js播放dplayer播放（弹幕效果）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1122298。

相关文章

JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因？

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因？

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台，是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力，在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术，能够处理多种视频流格式，并以多种格式（RTMP、RTSP、HTTP-FLV、WebS
阅读更多...
综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动，这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升：减少抖动，提高图像的清晰度和细节表现力，使得监控画面更加真实可信。 - 细节增强：在低光条件下，抖
阅读更多...
在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式（Singleton Pattern） 确保一个类只有一个实例，并提供一个全局访问点。 示例代码： class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...
防近视护眼台灯什么牌子好？五款防近视效果好的护眼台灯推荐

防近视护眼台灯什么牌子好？五款防近视效果好的护眼台灯推荐

在家里，灯具是属于离不开的家具，每个大大小小的地方都需要的照亮，所以一盏好灯是必不可少的，每个发挥着作用。而护眼台灯就起了一个保护眼睛，预防近视的作用。可以保护我们在学习，阅读的时候提供一个合适的光线环境，保护我们的眼睛。防近视护眼台灯什么牌子好？那我们怎么选择一个优秀的护眼台灯也是很重要，才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐： 一：六个推荐防近视效果好的护眼台灯的
阅读更多...
Node.js学习记录（二）

Node.js学习记录（二）

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件
阅读更多...
EasyPlayer.js网页H5 Web js播放器能力合集

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求，要求做一款播放器，发现能力上跟EasyPlayer.js基本一致，满足要求： 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏（单屏/全屏） 多分屏（2*2） 多分屏（3*3） 多分屏（4*4） 播放控制 播放（单个或全部） 暂停（暂停时展示最后一帧画面） 停止（单个或全部） 声音控制（开关/音量调节） 主辅码流切换 辅助功能 屏
阅读更多...
音视频入门基础：WAV专题（10）——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

音视频入门基础：WAV专题（10）——FFmpeg源码中计算WAV音频文件每个packet的pts、dts的实现

一、引言 从文章《音视频入门基础：WAV专题（6）——通过FFprobe显示WAV音频文件每个数据包的信息》中我们可以知道，通过FFprobe命令可以打印WAV音频文件每个packet（也称为数据包或多媒体包）的信息，这些信息包含该packet的pts、dts： 打印出来的“pts”实际是AVPacket结构体中的成员变量pts，是以AVStream->time_base为单位的显
阅读更多...
《x86汇编语言：从实模式到保护模式》视频来了

《x86汇编语言：从实模式到保护模式》视频来了

《x86汇编语言：从实模式到保护模式》视频来了 很多朋友留言，说我的专栏《x86汇编语言：从实模式到保护模式》写得很详细，还有的朋友希望我能写得更细，最好是覆盖全书的所有章节。 毕竟我不是作者，只有作者的解读才是最权威的。 当初我学习这本书的时候，只能靠自己摸索，网上搜不到什么好资源。 如果你正在学这本书或者汇编语言，那你有福气了。 本书作者李忠老师，以此书为蓝本，录制了全套视频。 试
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2