Video.js实现在html页面播放rtmp流媒体

这篇具有很好参考价值的文章主要介绍了Video.js实现在html页面播放rtmp流媒体。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

要在HTML页面中使用Video.js播放RTMP流媒体,需要使用videojs-contrib-media-sources插件和videojs-flash插件。以下是一个示例代码:

<!DOCTYPE html>
<html>
  <head>
    <link href="//vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/7.14.3/video.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-media-sources/6.7.0/videojs-contrib-media-sources.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/videojs-flash/2.1.0/videojs-flash.min.js"></script>
  </head>
  <body>
    <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="480">
      <source src="" type='video/flv'>
    </video>

    <script>
      var player = videojs('my-video', {
        techOrder: ['flash', 'html5'],
        sources: [{
          src: 'rtmp://your_rtmp_url',
          type: 'rtmp/flv'
        }]
      });
    </script>
  </body>
</html>

请将your_rtmp_url替换为实际的RTMP流媒体地址。

在这个示例代码中,我们首先导入了video.js的CSS和JS文件,以及videojs-contrib-media-sources插件和videojs-flash插件的JS文件。然后,在<video>标签中添加了一个空的<source>标签,稍后将通过JavaScript代码设置其源地址和类型。接下来,通过JavaScript代码初始化video.js播放器并配置使用Flash技术作为首选技术进行播放。

注意,使用Flash播放RTMP流需要浏览器支持Flash插件,并且可能受到防火墙或其他网络限制的影响。文章来源地址https://www.toymoban.com/news/detail-717869.html

到了这里,关于Video.js实现在html页面播放rtmp流媒体的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Qt推流程序(视频文件/视频流/摄像头/桌面转成流媒体rtmp+hls+webrtc)可在网页和播放器远程观看

    推流直播就是把采集阶段封包好的内容传输到服务器的过程。其实就是将现场的视频信号从手机端,电脑端,摄影机端打包传到服务器的过程。“推流”对网络要求比较高,如果网络不稳定,直播效果就会很差,观众观看直播时就会发生卡顿等现象,观看体验比较糟糕。主流

    2024年02月04日
    浏览(69)
  • LiveNVR监控流媒体Onvif/RTSP功能-支持无人机、IPC等设备RTMP推流转码分发H5无插件播放也支持GB28181输出

    目前不是所有的无人机都支持GB28181的国标注册,有的只能输出直播流,有的只能支持RTMP的推流。比如大疆无人机有的产品上不能直接注册国标平台,只能rtmp推流。那么,项目中如果将无人机的rtmp的推流转成GB/T28181 示例:rtmp://192.168.2.135:10935/live/stream_1 192.168.2.135 是部署Liv

    2024年02月16日
    浏览(45)
  • 9步实现 Docker部署 SRS rtmp/flv流媒体服务器

    这是基于centos7.6系统部署的 运行容器会直接停留在容器运行界面,通过Ctrl+P+Q可后台形式退出容器 这时候其实已经运行成功!可以通过以下命令查看SRS控制台 进入/home/docker/srs3 可查看配置文件是否复制成功 这是可能会报错: 因为步骤四我们意见运行一个容器,已经使用过

    2024年02月15日
    浏览(60)
  • H.265视频无插件流媒体播放器EasyPlayer.js播放webrtc断流重连的异常修复

    H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,可支持H.264与H.265编码格式,性能稳定、播放流畅,能支持WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC等格式的视频流,并且已实现网页端实时录像、在iOS上实现低延时直

    2024年02月10日
    浏览(58)
  • 【FAQ】H.265视频无插件流媒体播放器EasyPlayer.js播放webrtc断流重连的异常修复

    H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,可支持H.264与H.265编码格式,性能稳定、播放流畅,能支持WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC等格式的视频流,并且已实现网页端实时录像、在iOS上实现低延时直

    2024年02月11日
    浏览(58)
  • 实现html页面插入视频的自动播放、视频播放结束后的事件触发(video标签)

    要实现自动播放需要同时使用autoplay和muted属性,简单示例代码如下: html代码: css代码: 要实现视频播放结束后的事件触发需要使用addEventListener(“ended”, function () {})进行事件监听,简单示例代码如下: html代码: css代码: js代码: (1)菜鸟网址:https://www.runoob.com/tags/t

    2024年02月05日
    浏览(48)
  • 使用EasyDarwin + ffmpeg 搭建流媒体服务器,实现多台智能电视同步播放宣传视频

    近期单位用户提出需求,需要在单位内部的9台安卓智能电视(小米电视)上同步播放用户提供的宣传视频,希望能够做到所有电视音视频同步播放(电视均位于食堂内部,使用内置扬声器,各电视间音频延迟不同会导致混响) 。 由于电视在安装时只预留了电源线,使用HDM

    2024年02月10日
    浏览(75)
  • RTMP协议深度解析:从原理到实践,掌握实时流媒体传输技术

    在当今的互联网时代,流媒体传输技术在人们的日常生活中扮演着越来越重要的角色。从在线教育到实时娱乐,流媒体技术已经渗透到了生活的方方面面。在这篇博客中,我们将从C++语言的角度,探讨流媒体传输技术的重要性,为什么选择RTMP协议以及RTMP协议的发展与应用。

    2023年04月26日
    浏览(84)
  • 使用nginx部署rtmp流媒体服务器完成直播推流

    笔者为了开发方便使用windows系统的Nginx进行配置。 下载Nginx http://nginx-win.ecsds.eu/download/ 在windows版本下只有个别的几个版本才支持rtmp服务,本文选择版本 nginx 1.7.11.3 Gryphon.zip 解压下载zip文件 在conf文件夹中找到 nginx-win.conf 配置我们所需要的内容 rtmp是adobe基于flash开发的音视频

    2024年02月15日
    浏览(45)
  • 流媒体传输协议相关小结——NALU、RTP、RTSP、RTMP、SDP等

    前言: 本文是博主在学习流媒体时进行的小结,涉及内容较多。 由于流媒体协议说复杂也复杂,说简单也简单,复杂在需要考虑到每一位比特,简单在现成的轮子很多,只是会用往往已经足够。因此此文面向那些希望对流媒体协议有一定的基础概念的读者,而非注重实操。

    2024年02月05日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包