发布时间:2025-06-24 19:37:30 作者:北方职教升学中心 阅读量:021
音量控制、
配置环境变量,老生常谈,openssl的默认安装路径为C:\Program Files\OpenSSL-Win64\bin,这里有windows配置环境变量的通用教程,最后我们验证下是否配置成功openssl -v 或者 openssl version。安装OpenSSL
下载 openssl安装包,一般下载列表第1个EXE即可(不带light的是完整功能的安装包,我们用不到),下载完成后双击安装一直点下一步就行了。快退、
文章目录
- 学习链接
- 步骤
- 安装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部分、
centos7安装openssl:sudo yum install pcre-devel openssl openssl-devel -y
生成一个enc.key文件
生成一个enc.key文件,license与windows指令相同
生成加密串
生成加密串(b6dc7333568a0deef8e6b331b9725264
),记下来
创建enc.keyinfo文件
新建一个文件 enc.keyinfo 内容格式如下:
KeyURI# enc.key的路径,使用http形式Pathtokeyfile # enc.key文件IV# 上面生成的iv
示例
http://localhost/video/enc.keyenc.keyb6dc7333568a0deef8e6b331b9725264
视频切分
视频切分,传一个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的接口
@ConfigurationpublicclassWebConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry .addMapping("/**").maxAge(3600).allowCredentials(true).allowedOrigins("*").allowedMethods("*").allowedHeaders("*").exposedHeaders("token","Authorization");}}
videojs播放m3u8视频
<!DOCTYPEhtml><html><head><metacharset=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: --><linkhref="https://unpkg.com/video.js@5.16.0/dist/video-js.css"rel="stylesheet"><scriptsrc="https://unpkg.com/video.js@5.16.0/dist/video.js"></script><scriptsrc="https://unpkg.com/videojs-contrib-hls@4.1.1/dist/videojs-contrib-hls.js"></script></head><body><h1>Video.js Example Embed</h1><videoid="my_video_1"class="video-js vjs-default-skin"controlspreload="auto"width="640"height="268"data-setup='{}'><sourcesrc="./video/playlist.m3u8"type="application/x-mpegURL"></video></body></html>
当未提供enc.key的文件时,报错
直接修改m3u8的URI也是没问题的,只要后台改了就行
其它
videojs切换播放视频
<!DOCTYPEhtml><html><head><metacharset=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: --><linkhref="https://unpkg.com/video.js@5.16.0/dist/video-js.css"rel="stylesheet"><scriptsrc="https://unpkg.com/video.js@5.16.0/dist/video.js"></script><scriptsrc="https://unpkg.com/videojs-contrib-hls@4.1.1/dist/videojs-contrib-hls.js"></script></head><body><h1>Video.js Example Embed</h1><videoid="my_video_1"class="video-js vjs-default-skin"controlspreload="auto"width="640"height="268"data-setup='{}'><sourcesrc="./video1/playlist.m3u8"type="application/x-mpegURL"></video><hr><buttonid="video1"onclick="videoHandler(event)"data-videourl="./video1/playlist.m3u8">视频1</button><buttonid="video2"onclick="videoHandler(event)"data-videourl="./video2/index.m3u8">视频2</button><buttonid="video3"onclick="videoHandler(event)"data-videourl="http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8">失效的url</button><buttononclick="pause()">暂停</button><buttononclick="play()">播放</button><buttononclick="destroy()">关闭</button><script>constplayerOptions ={autoplay:false,// 自动播放controls:true,// 显示控制条errorDisplay:false,// 隐藏错误提示muted:true,// 静音sources:[{// src: "./video1/playlist.m3u8",src:"./video2/index.m3u8",type:"application/x-mpegURL",},],};varplayer =videojs(document.querySelector('#my_video_1'),playerOptions,()=>{console.log("Video.js player is ready");})functionvideoHandler(e){constvideoUrl =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);// 播放结束});functionpause(){player.pause();// 暂停}functionplay(){player.play();// 继续播放}functiondestroy(){player.dispose();// 关闭 , video这个dom都被删除了player =null}</script></body></html>
hls.js切换播放视频
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="https://cdn.jsdelivr.net/npm/hls.js@latest"></script></head><body><videoid="video"width="640"height="268"controls></video><hr/><buttonid="video1"onclick="videoHandler(event)"data-videourl="./video1/playlist.m3u8">视频1</button><buttonid="video2"onclick="videoHandler(event)"data-videourl="./video2/index.m3u8">视频2</button><buttononclick="playVideo()">播放</button><buttononclick="pauseVideo()">暂停</button></body><script>varvideo =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)letconfig ={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")},}varhls =newHls(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);functionplayVideo(){video.play()}functionpauseVideo(){video.pause()}functionvideoHandler(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.elseif(video.canPlayType('application/vnd.apple.mpegurl')){video.src =videoSrc;}</script></html>
dplayer切换播放视频(弹幕)
可以切换视频,可以发送弹幕(发送完弹幕后,可以在本地显示,可以调用dp.danmaku.send(danmaku, callback: function): 提交一个新弹幕,后面可以使用websoket将代码发到其它观看此视频的用户)
必须引入DPlayer.min.css,否则弹幕无法正常显示
有个问题:按照官网设置的danmaku的token,但是在请求弹幕接口的时候没有携带这个请求头,不知道该问题的原因(哦,原来是发送弹幕的时候,会携带这个danmaku.token参数到Request Payload中,我还以为请求弹幕的时候,也得带呢)
弹幕的格式:每条弹幕都是1个数组,数组中按顺序依次是:time-时间,type-类型,color-颜色,author-发送者,text-内容
弹幕返回的示例可以参考,
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","刚才说比其他翻唱都好听的你是认真的么,这。播放暂停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';// 视频切换functionvideoHandler(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',})}functionplayVideo(){dp.play()}functionpauseVideo(){dp.pause()}Window.dp =dp;</script></body></html>
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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> --><linkrel="stylesheet"href="./css/DPlayer.min.css"><scriptsrc="./js/hls.js"></script><scriptsrc="./js/dplayer.js"></script></head><body><divclass="dplayer-container"><divid="dplayer"></div></div><hr/><buttonid="video1"onclick="videoHandler(event)"data-videourl="./video1/playlist.m3u8">视频1</button><buttonid="video2"onclick="videoHandler(event)"data-videourl="./video2/index.m3u8">视频2</button><buttononclick="playVideo()">播放</button><buttononclick="pauseVideo()">暂停</button><script>// 另一种方式,使用 customTypeconstdp =newDPlayer({container:document.getElementById('dplayer'),autoplay:false,// 自动播放video:{url:'./video1/playlist.m3u8',type:'customHls',pic:'./soft-dev.png',// video的poster属性, 视频封面customType:{customHls:function(video,player){letconfig ={xhrSetup:function(xhr,url){xhr.withCredentials =true;// 会携带cookiexhr.setRequestHeader('token',"my-token")},}consthls =newHls(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,// 开启热键,支持快进、