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插件,并且可能受到防火墙或其他网络限制的影响。

相关文章
|
7月前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
328 2
|
8月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
2280 0
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
655 77
|
12月前
简约404错误页面HTML源码
简约404错误页面HTML源码
428 12
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
598 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
630 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
存储 移动开发 JavaScript
网页 HTML 自动播放下一首音乐
在 HTML5 中实现自动播放下一首音乐,通过管理音乐列表、操作音频元素和监听事件完成。创建包含多个音乐链接的列表,使用 `&lt;audio&gt;` 元素加载音乐,监听 `ended` 事件,在当前音乐结束时自动播放下一首。示例代码展示了如何使用 JavaScript 实现这一功能,确保无缝切换音乐。
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
385 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
302 1
JavaScript中的原型 保姆级文章一文搞懂