播放实时流时,将参数附加到每个m3u8和ts文件 [英] Appending paramaters to each m3u8 and ts file while playing live stream
问题描述
我在实时流式传输环境中使用videojs,并使用nginx安全URL保护流.有关详细信息,请参见此处- https://www .nginx.com/blog/securing-urls-secure-link-module-nginx-plus/
I am using videojs in live streaming environment and using nginx secure URLs to protect the stream. See here for the details - https://www.nginx.com/blog/securing-urls-secure-link-module-nginx-plus/
该算法运行良好,并且播放器能够检测到live.m3u8文件何时可用.但是,在播放流时,我只是得到了一个旋转的轮子.在JS控制台上,我看到了子播放列表,例如live_109.m3u8 URL没有必需的md5哈希和到期时间戳,因此nginx返回403.
The algorithm works fine and the player is able to detect when the live.m3u8 file becomes available. However, when playing the stream, I just get a spinning wheel. On the JS console, I see that the sub-playlist e.g. live_109.m3u8 URL does not have the required md5 hash and expiry timestamp and hence nginx is returning 403.
流URL格式为-
https://example.com/video/live.m3u8?md5=xznbbmbbbbbxncb&expire=123456788
当我播放视频流时,控制台会提示播放器正在尝试呼叫
When I play the stream, the console suggest that the player is now trying to call
https://example.com/video/live_109.m3u8
由于没有md5和expiry参数,nginx会发送403,我明白了.
And since without the md5 and expiry parameters, nginx will send 403, I am getting that.
添加?md5=xznbbmbbbbbxncb&expire=123456788
可以与live_109.m3u8完美配合.
Adding ?md5=xznbbmbbbbbxncb&expire=123456788
works perfect with the live_109.m3u8 also.
我确定单个段(.ts文件)也会遇到相同的问题
I am sure the same problem will be with the individual segments (.ts files)
我的问题是,如何将?md5=xznbbmbbbbbxncb&expire=123456788
附加到从页面调用的每个.m3u8和.ts文件中.
My question here is that how can I append ?md5=xznbbmbbbbbxncb&expire=123456788
to every .m3u8 and .ts file being called from the page.
推荐答案
我自己找到了答案.以下代码段显示了如何借助videojs的 http-streaming库 -
I found the answer myself. The following snippet shows as to how to do it with the help of http-streaming library of videojs -
<script src="https://unpkg.com/@videojs/http-streaming@1.11.2/dist/videojs-http-streaming.js"></script>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
data-setup='{}'>
</video>
<script>
videojs.Hls.xhr.beforeRequest = function(options){
options.uri = options.uri+'/liveout/?md5=_PwgAm2z_kO8FgmWRWXvhQ&expires=1574698730';
//.replace('cloudfront.net', 'foo.com');
console.log(options);
return options;
};
var player=videojs('my_video_1');
player.ready(function() {
this.src({
src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
type: 'application/x-mpegURL'
});
});
</script>
这篇关于播放实时流时,将参数附加到每个m3u8和ts文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!