开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何用nginx设置http伪流的videojs？

nginx是一个高性能的HTTP和反向代理服务器，可以用于设置HTTP伪流的videojs。下面是一种基本的配置方法：

首先，确保已经安装了nginx服务器，并且已经正确配置了域名解析和SSL证书。
在nginx的配置文件中，找到对应的虚拟主机配置块，一般是位于/etc/nginx/conf.d/目录下的.conf文件。
在虚拟主机配置块中，添加以下配置：

location /videos {
    mp4;
    mp4_buffer_size 1m;
    mp4_max_buffer_size 5m;
    alias /path/to/videos;
}

上述配置中，/videos是访问视频资源的URL路径，/path/to/videos是视频文件所在的目录路径。

保存配置文件并重新加载nginx配置，使配置生效。
在HTML页面中使用video.js播放器来播放视频，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <link href="https://vjs.zencdn.net/7.15.0/video-js.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/7.15.0/video.js"></script>
</head>
<body>
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="360">
        <source src="/videos/video.mp4" type="video/mp4">
    </video>
    <script>
        var player = videojs('my-video');
    </script>
</body>
</html>

上述代码中，/videos/video.mp4是视频文件的URL路径，根据实际情况进行修改。

通过以上配置和代码，nginx会将HTTP请求转发到指定的视频文件，并使用video.js播放器进行播放。这样就实现了使用nginx设置HTTP伪流的videojs。

腾讯云相关产品推荐：腾讯云CDN（内容分发网络），详情请参考腾讯云CDN产品介绍。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

WordPress 如何设置Apache和Nginx的伪静态规则设置以及二级目录伪静态规则

WordPress的伪静态规则是根据服务器环境来设置的，不同的PHP环境有不同的伪静态设置方法，常见的PHP环境有 Apache和Nginx ，以下分别就这两种环境做伪静态设置。...值得一提的是，现在有很多服务器面板如：宝塔，可以直接勾选就能设置伪静态，如果你正在用，就可以不用继续看了，可能帮助不大，但也可以学习参考。...---- Nginx规则：操作方法：以下代码加入到网站的配置文件 xxxx.conf 中的 server{} 中。...根目录下WordPress的伪静态规则： location / { if (-f $request_filename/index.html){ rewrite (.*) $1/index.html...-f $request_filename){ rewrite (.*) /index.php; } } 二级目录下WordPress的伪静态规则：注意将以下代码中的“二级目录名

3K4 0

Ngnix 搭建视频直播服务器

大家好，又见面了，我是你们的朋友全栈君。受疫情推迟开学影响，这段时间全国如火如荼推广网络教学，前段时间搭建了edx慕课平台，但还缺点什么，就是网络直播教学，花一天时间，搭建成功，记录备用。 1....wget http://nginx.org/download/nginx-1.9.9.tar.gz tar -zxvf nginx-1.9.9.tar.gz cd nginx-1.9.9 ....{ server { listen 1935; #监听的端口 chunk_size 4000; #流整合的最大的块大小,这个值设置的越大 CPU 负载就越小.../sbin/nginx -c ./conf/nginx.conf 如修改配置后 nginx -s reload 命令重新读取配置 3....– 引入的videojs-flash.js插件主要是为播放rtmp视频流–> </

4.9K4 1

设置Nginx伪静态，隐藏Typecho链接中的index.php

情况默认设置下文章URL格式为https://www.9kr.cc/index.php/archives/3/，带着个index.php，不好看。...设置好伪静态后URL变为https://www.9kr.cc/archives/3/，更简洁好看。...设置伪静态在Nginx设置伪静态代码代码如下，如果用的宝塔可以直接在模板中找到typecho直接加载保存。 if (!....*)$ /index.php$1 last; } 在Typecho后台开启重写功能路径：设置 > 永久链接 > 是否使用地址重写功能 > 启用

8.5K1 0

搭建直播系统并实现h5播放rtmp

我们使用nginx的rtmp插件来搭建推流服务器基于nginx的rtmp直播服务器安装加载nginx-rtmp-module模块的nginx 首先下载nginx 到 https://github.com...播放列表长度 } } } 使用rtmp协议并且监听了9999端口，如果我们的推流地址填写的是rtmp://ip:9999/myapp，那么就是纯粹的rmtp协议的流，如果推流地址填写的是rmtp:...//ip:9999/live，那么推流之后会在/usr/local/etc/nginx/html/multimedia/hls目录下生成很多ts格式的视频切片和一个m3u8格式的文件，我们想要用http.../local/etc/nginx/html/multimedia/hls/; add_header Cache-Control no-cache; } 当我们的推流地址填写的是rtmp://ip:9999...rtmp://ip:9999/myapp，在h5端播放的时候会涉及到h5播放rtmp协议的问题，h5安装vide.js之后还要额外安装videojs-flash插件。

6.5K2 0

搭建直播系统并实现h5播放rtmp

我们使用nginx的rtmp插件来搭建推流服务器基于nginx的rtmp直播服务器安装加载nginx-rtmp-module模块的nginx 首先下载nginx 到 https://github.com...，如果推流地址填写的是rmtp://ip:9999/live，那么推流之后会在/usr/local/etc/nginx/html/multimedia/hls目录下生成很多ts格式的视频切片和一个m3u8...格式的文件，我们想要用http协议访问这个m3u8文件就需要再配置http模块。...} 当我们的推流地址填写的是rtmp://ip:9999/live/room1时，使用http://ip:80/live/room1.m3u8就能把rtmp转成hls访问这个直播流了。...rtmp://ip:9999/myapp，在h5端播放的时候会涉及到h5播放rtmp协议的问题，h5安装vide.js之后还要额外安装videojs-flash插件。

8K2 0

如何开发一款 H5 小程序直播？

4.视频验证上面我们已经说了server工具提供三种协议的视频流，分别是rtmp，http-flv以及hls。可以使用VLC播放器验证rtmp协议的视频流。 ?...可以使用Safari浏览器访问 http://127.0.0.1:7002/live/movie.m3u8 H5端播放器这里才是前端真正需要关心的部分，主要介绍我们如何用js去写一个直播的播放器，...在在nginx.conf文件中配置，我们需要配置服务RTMP模块，在配置文件的最底部新开一个代码块叫rtmp，里面写上监听1935端口，视频切片大小设置4000，也可以自行设置，然后配置一个rtmp的直播应用...nginx -s reload 同样的，我们可以找到前面的那个1.mp4使用ffmpeg来推流。...，我们之前在nginx的http协议中也增加了一个hls访问路径。

3.6K2 0

利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实现实时网络直播

但是其高昂的费用以及较高的准入门槛让许多个人和小型企业望而却步，本文要讲解的是如何使用nginx-rtmp搭建直播服务器，配合FFmpeg推流，在网页端vue.js作为载体利用video.js作为流播放器...因为我这里使用的传输协议是RTMP，所以只要支持RTMP 流协议的播放器都可以使用，这里我们使用nginx, 一般情况下视频采集处理后推流到流媒体服务器，第一部分功能完成。...好在docker上有大把别人编译设置好的rtmp环境，所以可以直接拿来用，docker的优越性由此可见一斑，这里用到的是alfg/nginx-rtmp库。 ...-p 8000:80 --rm alfg/nginx-rtmp 访问宿主的8000端口显示nginx欢迎页面然后利用FFmpeg进行推流操作，ffmpeg是什么请移步：Python3利用...-- 直播地址就是nginx映射后的播放地址，注意后缀为直播流的m3u8 --> <source src="<em>http</em>://192.168.99.100:8000/live/test.m3u8"

5K1 0

Nginx-rtmp+ FFmpeg +Docker + vue.js 直播系统搭建

思路（如图）： 1，开启推流服务器（这里我的Nginx-rtmp服务器搭建成功）进入docker 开启推流服务器 docker run -it -p 1935:1935 -p 8000:80 --...rm alfg/nginx-rtmp 2，推流（两种方法）命令推流：查看本机摄像头及麦克风设备 ffmpeg -list_devices true -f dshow -i dummy 音视频推流：...libx264 -preset ultrafast -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://localhost:1935/hls/home 播放地址http...（例如：OBS Studio） 3，拉流这里前端使用的是通过VUE 注意使用video需安装以下几个依赖 cnpm install video.js cnpm install aes-decrypter...插件 import videojs from 'video.js' import 'videojs-contrib-hls' export default

2K1 0

海康sdk协议接口_海康sadp搜索不到设备

://xxx/hls這個地址可以用來推流和拉流，其中xxx是你的ip地址或域名。...备注 [1]RTSP数据源可以适配到adobe的FMS、Wowza、800li media server。 [2]海康的莹石云，提供RTMP视频流服务!...]Mac直播服务器Nginx配置对HLS的支持 http://www.cnblogs.com/jys509/p/5653720.html [2]Ubuntu下使用Python-opencv获取海康威视...RTSP码流教程 http://blog.csdn.net/hui3909/article/details/53435379 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.5K2 0

开源流媒体服务器SRS学习笔记(2) - rtmp http-flv hls 协议配置及跨域问题

_defaultVhost__ { # http-flv设置 http_remux{ enabled on; mount [vhost]/...要注意的是：hls是把实时的视频流，分成1个个小的切片，保存在/usr/local/srs/objs/nginx/html/live/ 目录下，参考下图： ?...更好的办法，是在srs前面放一个nginx，做转发来解决跨域问题。...通常h5页面，是通过nginx来访问的，可以在nginx里，把特定视频源路径，转发到后端srs服务器上，参考以下配置： location /srs/ { proxy_pass http://10.2...tips: obs+srs支持多路视频源同时直播，上图中阿凡达+本机摄像头，二路视频同时推流/拉流，毫无影响。

4.8K5 0

Nginx+FFmpeg打造自己的视频直播服务

nginx转发视频流需要这一个组件，相关依赖包请看文末。...修改nginx配置 nginx的rtmp-module模块可以帮助我们接收ffmpeg推送的流媒体文件，使用http进行访问。...nginx -s reload FFmpeg转流推流 nginx配置完毕，接下来我们测试ffmpeg的转流和向nginx推流，执行以下命令： ffmpeg -rtsp_transport tcp -i...，nginx的rtmp模块帮我们做了这一点来防止内存溢出的问题，生成的文件如下： m3u8 为了可以直接用http访问m3u8文件，我们在nginx的http模块下加入以下配置： server {...）：打开网络串流打开成功：成功代码实现自动转流在前面我们利用ffmpeg的转流命令成功把rtsp视频流转化为了http流地址，但在实际的程序应用中不可能手动去做这些事情，所以我们利用java实现一个自动转流方法

6K7 4

html播放rtsp流,浏览器播放rtsp视频流解决方案

rtmp的(如nginx 1.7.11.3 Gryphon) 3....Live Streaming) 直播是有苹果提出的一个基于http的协议。...其原理是把整个流切分成一个个的小视频文件，然后通过一个m3u8的文件列表来管理这些视频文件 HTTP Live Streaming 并不是一个真正实时的流媒体系统，这是因为对应于媒体分段的大小和持续时间有一定潜在的时间延时...单位为秒 -hls_list_size n:设置播放列表保存的最多条目，设置为0会保存有所片信息，默认值为5 -hls_wrap n:设置多少片之后开始覆盖，如果设置为0则不会覆盖，默认值为0.这个选项能够避免在磁盘上存储过多的片...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

6.1K13 0

ubuntu搭建推流服务器Nginx+rtmp

也要玩玩推流服务器～～～实现服务器推流/PC客户端观看/浏览器客户端查看 ---- ****简介**** 对于Nginx的优点呢就不多说了，两句话： 1)并发量高 2)可负载均衡重点谈谈rtmp...Alic_客户端获取流对于浏览器呢,html的整理代码如下 var player = videojs('example-video');...推流还是用ffmpeg的命令来, 推流一段时间后, 你会发现在"/home/alic/www/hls"目录里, 有很多ts文件, 还有一个后缀".m3u8"文件上面配置中的 server:8081 块...Alic_浏览器搭建推流服务器Nginx+rtmp就成功了！即将总结ffmpeg推流的命令~~~ ----

4.1K2 0

我让GPT4为OriginBot开发了一个监控功能

设置媒体流服务器在服务器端，我们需要采用一种支持实时流媒体传输协议（如 HLS（HTTP Live Streaming）、RTMP、WebRTC 或 MPEG-DASH）的工具或库来创建类似媒体流。...例如 videojs 和它的插件 videojs-http-streaming....客户端（Vue.js 中）在 Vue 中，需要一种方式来播放 RTMP 或者 HLS 流，例如采用 videojs 和它的插件 videojs-http-streaming。...首先安装相关的包： npm install --save video.js@7 npm install --save @videojs/http-streaming 然后创建用于接收并播放视频流的 Vue...以上设定中的 ‘/live’ 是我们在 nginx.conf 文件中设置的 rtmp 应用名, ‘test’ 对应于你推送至 RTMP 的特定流的名称.

1311 0

快速学习-视频播放器解决方案

官方地址：http://videojs.com/ 3.2 下载video.js Video.js： https://github.com/videojs/video.js videojs-contrib-hls...： https://github.com/videojs/videojs-contrib-hls#installation （videojs-contrib-hls是播放hls的一个插件）使用文档：...http://docs.videojs.com/tutorial-videojs_.html 本教程使用 video.js 6.7.3 版本，videojs-contrib-hls 5.14.1版本。...3.3.1 Nginx媒体服务器 HLS协议基于Http协议，本项目使用Nginx作为视频服务器。下图是Nginx媒体服务器的配置流程图： ?...如果允许任何站点跨域访问则设置为*，通常这是不建议的。

4.7K1 0

nginx实现最简单的直播平台

环境准备 nginx直播插件准备源码安装nginx 启动并配置nginx 使用EV录屏实现推流 -曾老湿, 江湖人称曾老大。...~]# wget http://nginx.org/download/nginx-1.10.0.tar.gz #查看上传的包 [root@centos7 ~]# ll 总用量 896 -rwxr-xr-x...00:00:00 nginx: cache manager process 使用EV录屏实现推流串流地址：rtmp://10.0.0.100/live 地址秘钥：zls 这里地址秘钥随便填写...<script src="https://cdnjs.cloudflare.com/ajax/libs/<em>videojs</em>-contrib-hls/5.12.2/<em>videojs</em>-contrib-hls.js...://10.0.0.100 就可以看到直播<em>的</em>界面了

6352 0

不存在的 -> 前端实时流探索记

由于下面的两种方法也需要用到 RTMP，所以这里就展示一下 RTSP 流如何转换成 RTMP ，我们使用 ffmpeg+Nginx+nginx-rtmp-module 来做这件事： # 在 http 同一层配置...HLS HLS（HTTP Live Streaming）是苹果公司提出的基于 HTTP 协议的的流媒体网络传输协议，它的工作原理是把整个流分成一个个小的基于 HTTP 的文件来下载，每次只下载一些。...HTTP-FLV 本质上是将流转成 HTTP 协议下的 flv 文件，在 Nginx 上我们可以使用 nginx-http-flv-module 来将 RTMP 流转成 HTTP 流。...HLS 说了这么多，不如直接上手看看吧：首先我们需要一个新的 nginx 插件：nginx-http-flv-module 在 nginx.conf 中进行一些新的配置： # rtmp server...可以尝试关闭 nginx 的 http 配置里的 gop_cache 。gop_cache 又称关键帧缓存，其意义是控制视频的关键帧之间的缓存是否开启。

3.1K5 0

简单搭建一个直播服务器

/objs/srs -c conf/rtmp.conf & 二、开始直播视频了 1、我们需要下载一个推流的录屏软件 https://pc.qq.com/detail/4/detail_23604.html...下载安装好后需要进行如下设置：流密钥默认为：livestream 2、这个时候会在我们配置的hls_path生成ts和m3u9文件 3、将该资源暴露出来，就可以完成别人来观看直播了，这里我使用的是...nginx代理 4、最后客户端观看直播 <source id="source" src="<em>http</em>

3.5K3 0

Nginx-rtmp、FFmpeg实现直播效果并在web页面播放「建议收藏」

本文选择的路线是视频文件–>FFmpeg–>nginx–>web播放 2.FFmpeg是一个强大的视频编辑软件，基本干视频，音频的多多少少都会用到这个软件。...本文中FFmpeg的作用是将视频整成视频流的形式。 3.nginx的作用主要是将FFmpeg的视频流进行发布，供web进行访问。...path里面配到bin目录第二步：安装nginx 这个更简单，下载完了解压一下，然后把rtmp的放在nginx的总目录下就行了，主要是配置文件的书写。...as rtmp deny play all; } } } http { sendfile off; tcp_nopush on; # aio on; directio 512; default_type...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.5K1 0

videojs播放器插件使用详解

HTTP stream是各家自己定义的http流，应用于国内点播视频网站。...HLS是苹果公司实现的基于 HTTP 的流媒体传输协议，全称 HTTP Live Streaming，可支持流媒体的直播和点播，主要应用在 iOS 系统，为 iOS 设备（如 iPhone、iPad）提供音视频直播和点播方案...HTTP用于点播，本质上还是文件分发，实时性差。 HLS支持点播和直播，HLS的延迟在10秒以上。 RTMP本质上是流协议，主要的优势是：实时性高(实时性一般在3秒之内)、稳定性高。...RTMP协议一般传输的是flv，f4v格式流，RTSP协议一般传输的是ts,mp4格式的流。HTTP没有特定的流。...注意：必须在与videojs.options.autoSetup = falsevideojs源加载生效的同一时刻全局设置。

52.8K11 7

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭