LivePlayer.js免费直播、点播播放器如何自适应div宽高集成播放视频

最新推荐文章于 2025-08-13 10:36:45 发布
原创 最新推荐文章于 2025-08-13 10:36:45 发布 · 7.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
www.liveqing.com
文章标签：

#自适应div #LivePlayer #直播点播 #web播放器 #免费播放器

本文介绍LivePlayer网页直播及点播播放器的使用方法，包括如何通过设置DIV的宽高来自适应显示播放器，以及如何设置拉伸铺满显示效果。

LivePlayer网页直播、点播播放器

资源下载：https://www.liveqing.com/docs/download/LivePlayer.html
使用说明：https://www.liveqing.com/docs/manuals/LivePlayer.html

根据DIV宽高自适应显示播放

<body>
    <div class="dydiv">
        <live-player video-url="http://localhost:10080/vhls/562vgkMZR/562vgkMZR_live.m3u8" aspect="fullscreen">
        </live-player>
    </div>
</body>
<style>
    .dydiv {
        position: relative;
        height:500px;
        width: 400px;
    }
</style>

在这里插入图片描述

设置拉伸铺满显示效果

<body>
    <div class="dydiv">
        <live-player video-url="http://localhost:10080/vhls/562vgkMZR/562vgkMZR_live.m3u8" aspect="fullscreen"  stretch="true">
        </live-player>
    </div>
</body>
<style>
    .dydiv {
        position: relative;
        height:500px;
        width: 400px;
    }
</style>

在这里插入图片描述
WEB：www.liveqing.com

LivePlayer播放器的基本用法
weixin_45774558的博客
02-09 7476
​1.安装 npm install @liveqing/liveplayer 2.在vue.config.js添加配置
H5视频播放器（livePlayer.js）
蒋小姐的博客
05-23 1505
国网B接口服务 电网B接口；支持本地、内网、私有云部署；为企业视频能力建设，提供了视频点播转码、手机直播推流、云端录像存储计划、RTMP拉流推流服务、RTSP拉流推流服务、设备GB28181接入、Onvif云台控制等等能力，同时提供性能强大稳定的WebRTC/RTMP/HLS/RTSP/HTTP-FLV分发，支持H5页面无插件直播，强大的后台管理，详细的二次开发接口文档，服务搭建简单解压后一键启动，支持Windows和Linux环境部署。二、编辑webpack.xxx.config.js。
LivePlayer.js免费的H5播放器HLS/HTTP-FLV/WS-FLV/RTMP/H265/HEVC直播点播流播放常见问题
青柿视频流媒体的博客
11-03 8428
免费的H5播放器HLS/HTTP-FLV/WS-FLV/RTMP/H265/HEVC直播点播流播放常见问题1、页面控制台 Console 错误提示2、多分屏超过 6 路不能播放3、如何自适应 div4、播放器如何销毁5、LivePlayer.js使用安装 1、页面控制台 Console 错误提示 提示： TypeError: The element or ID supplied is not valid. (videojs) 检查 video-url 设置的播放地址 是否有效（可以用 VLC 播放尝试）
Live Player-开源音频播放器探索与实践
最新发布
weixin_36304957的博客
08-13 1027
开源音频播放器是一种允许用户以自由获取源代码的方式，使用、修改及分发软件的工具，它为用户提供了一个高度自定义和扩展的音乐播放环境。这些播放器通常由一个热心的开发者社区支持，他们共同致力于提供与专有软件相媲美的功能和更好的用户体验。开源音频播放器的一个主要优势是其透明性，用户可以审查代码来确保没有恶意功能或安全漏洞，同时，也因为全球开发者社区的贡献，能够快速适应新的音频技术和用户需求。在本章中，我们将探讨开源音频播放器的一些基本概念，并为后面章节的深入分析打下基础。
Web直播播放器快速集成(JS-DEMO)
06-06 490
Web直播播放器快速集成(JS-DEMO)，设置isAutoChange:true参数可以实现，直播开始时播放直播流，直播结束后，播放视频库-直播暂存-首个暂存文件。（注意：暂存文件保留有时间期限）
数据库表结构监控系统V1.0-langdy@live.cn要源码可以联系我
10-25
把安装后的jdk文件夹拷贝到本目录,然后取名为jdk, 比如jdk安装目录:C:\Program Files\Java\jdk1.6.0, 此时把文件夹jdk1.6.0复制到本目录,更名为jdk即可 编辑文件:resources/proxool.oracle.properties 把数据库连接条件改成需要连接的数据库即可运行 所有日志在logs文件夹里面 v1.0版本,只可以监控oracle表结构
liveplayer免费网页直播|点播播放器-页面动态多播放器添加代码示例
热门推荐
青柿视频流媒体的博客
04-17 2万+
强大的网页直播/点播播放器，使用简单，功能强大， 终身免费使用 支持m3u8播放; 支持HTTP-FLV播放; 支持RTMP播放; 支持直播和点播播放; 支持播放器快照截图; 支持点播多清晰度播放; 支持全屏或比例显示; 自带的flash支持极速和流畅模式; 自带的flash支持HTTP-FLV播放; 自动检测IE浏览器兼容播放; 详见：https://www.npmjs.com/pac...
JW Player播放器集成与JavaScript使用示例
js和简单使用jwplayer播放器代码”，说明该压缩包内不仅包含了JW Player的核心JavaScript文件（即`jwplayer.js`），还附带了基础的调用示例代码，帮助开发者快速集成并实现视频播放功能。从标签列表来看，“jwplayer...
流媒体技术【ffmepg、nginx-http-flv-moudle、video.js、flv.js】实现 web 端直播与视频回放功能 + 流媒体服务器搭建资源
Ironhide的博客
09-08 3138
文章目录流程介绍三种常见的视频流协议介绍（RTMP、RTSP、HLS）RTMP（Real Time Messaging Protocol）实时消息传输协议RTSP（Real Time Streaming Protocol）实时流传输协议HLS（HTTP Live Streaming）在浏览器中如何播放视频流播放 RTMP 视频流使用 ffmpeg + nginx-http-flv-module + flv.js 在浏览器中通过 http 播放视频（最推荐的方式）播放 HLS 视频流使用 ffmpeg + n
webplayer:基于 video.js 的 HTML 5 网络视频播放器
06-18
网络播放器 基于 video.js 的 HTML 5 网络视频播放器 入门 在服务器上 安装模块： npm install webplayer var webplayer = require ( 'webplayer' ) ; webplayer . awesome ( ) ; // "awesome" 在浏览器中 下载或。 在您的网页中： < script src =" dist/webplayer.min.js " > </ script > < script > awesome ( ) ; // "awesome" </ script > 在您的代码中，您可以将 webplayer 的方法附加到任何对象。 < script > var exports = Bocoup . utils ; </ script > < script src =" dist/webplay
<template> <div class="collection-station-log"> <!-- 采集站日志页面 --> <h3>采集站日志</h3> <video ref="videoPlayer" controls></video> <!-- 后续可添加数据展示区域 --> </div> </template> <script> import { createPlayer } from 'h265.js'; export default { name: 'CollectionStationLog', mounted() { const player = createPlayer({ // 配置 WebAssembly 解码器 wasmPath: '/node_modules/h265.js/dist/libdecoder.wasm' }); // 绑定视频元素 player.attachMediaElement(this.$refs.videoPlayer); // 加载 H265 视频流 player.load('http://41.200.93.231:8099/RecorderData/20250701/450307/20250701195225NOR06019426TD030000.mp4'); player.play(); } } </script>帮我把h265.js替换成mpegts.js播放h265编码格式的视频
07-03
我们参考用户提供的引用[1]中的信息，得知mpegts.js可以用于播放H.265视频流，并且它通过将H.265流封装成MP4格式提供给video标签播放。但需要注意的是，最终能否播放还取决于终端设备是否支持H.265解码。替换步骤：1...
Vue.js与流媒体服务器交互：实现点播和直播功能，全功能指南
[Vue.js与流媒体服务器交互：实现点播和直播功能，全功能指南](https://www.ionos.co.uk/digitalguide/fileadmin/DigitalGuide/Schaubilder/diagram-of-how-the-real-time-messaging-protocol-works_1_.png) ...
Vue-video-player与Nginx集成：高性能视频流服务器搭建
在此基础上，文章深入讲解了如何将Vue-video-player与Nginx集成，包括视频流服务器的搭建、视频点播与直播的实现以及安全性与性能监控措施。最后，通过实践应用案例分析，展示了集成技术在企业培训系统和CDN构建中的...
LivePlayer.js直播点播播放器如何配置点播倍速列表及默认倍速
青柿视频流媒体的博客
08-07 1702
配置点播倍速列表及默认倍速配置倍速列表配置默认倍速前端代码示例H5直播点播播放器 配置倍速列表 如： player.playbackRates = new Array(“1”,“5”,“6”) 配置默认倍速 如：playback-rate=“5” 前端代码示例 <live-player id="player01" playback-rate="5" video-url="http://192.168.2.135:10080/fvod/H5J1UAnMR/video.m3u8" live=
LivePlayer.js视频H5播放器如何配置iframe允许自动播放和全屏操作
青柿视频流媒体的博客
03-11 639
下载集成入口： https://www.liveqing.com/docs/download/LivePlayer.html 使用说明：https://www.liveqing.com/docs/manuals/LivePlayer.html
vue项目中视频实时播放时 播放器遇到的问题和解决过程 flv.js - EasyPlayer - LivePlayer
sandwich_99的博客
01-11 3576
EasyPlayer多屏实时播放 | 时差 | 延迟处理的很完善，EasyPlayer对于fvl.js的延迟问题采用的是追帧和加速播放，随着你暂停时间越久他追帧速度越慢，并且在追到延迟在10s时就停止了，也就是直播画面总是有10s的延迟（直播设备是测试过没问题的，并且在销毁重创画面是实时的）后来又发现了livePlayer，测试使用发现以上问题都不存在了，延迟也最慢控制在3s，也是我们项目中能接受的范围
LivePlayer.js播放器遇到悬停英文提示如何切换显示成中文
青柿视频流媒体的博客
10-21 675
遇到悬停英文提示如何切换显示成中文1、H5直播点播播放器2、页面遇到悬停英文提示3、切换显示成中文 1、H5直播点播播放器 下载集成入口： https://www.liveqing.com/docs/download/LivePlayer.html 使用说明：https://www.liveqing.com/docs/manuals/LivePlayer.html 2、页面遇到悬停英文提示 3、切换显示成中文 添加 lang=“zh-CN” <html lang="zh-CN"> .
使用LivePlayer.js和jQuery实现FLV视频播放
07-15
为了实现 FLV 视频播放功能，可以使用 **LivePlayer.js** 和 **jQuery** 结合的方式。LivePlayer.js 是一个轻量级的 JavaScript 库，用于播放 FLV 格式的视频流，而 jQuery 可以简化 DOM 操作和事件处理。 ### 实现步骤 1. **引入必要的库** 首先，在 HTML 文件中引入 `LivePlayer.js` 和 `jQuery`： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="path/to/LivePlayer.js"></script> ``` 2. **创建 HTML 页面结构** 创建一个包含 `<video>` 元素的页面，并添加播放、暂停等控制按钮： ```html <div class="controls"> <button id="playButton">播放</button> <button id="pauseButton">暂停</button> </div> <video id="rtmpVideo" autoplay controls width="600" height="576"></video> ``` 3. **初始化 LivePlayer** 使用 jQuery 绑定按钮点击事件，并在播放按钮点击时初始化 `LivePlayer`： ```javascript $(document).ready(function () { var flvPlayer = null; $('#playButton').on('click', function () { if (flvjs.isSupported()) { var videoElement = document.getElementById('rtmpVideo'); flvPlayer = flvjs.createPlayer({ type: 'flv', isLive: true, cors: true, hasAudio: false, hasVideo: true, enableStashBuffer: true, url: '你的FLV视频流地址' }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); // 设置加载时显示的海报图 videoElement.onwaiting = function () { videoElement.poster = "static/img/lod/1.gif"; }; } else { alert("当前浏览器不支持 FLV 播放"); } }); $('#pauseButton').on('click', function () { if (flvPlayer) { flvPlayer.pause(); } }); }); ``` 4. **兼容性注意事项** - `flv.js` 仅支持现代浏览器（如 Chrome 43+、Firefox 42+、Edge 15.15048+、Safari 10.1+）[^2]。 - 如果需要兼容 IE 浏览器，则需要采用后端推流或转码服务，将 FLV 转换为浏览器支持的格式。 ### 完整代码示例 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>FLV 视频播放</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="path/to/flv.min.js"></script> </head> <body> <div class="controls"> <button id="playButton">播放</button> <button id="pauseButton">暂停</button> </div> <video id="rtmpVideo" autoplay controls width="600" height="576"></video> <script> $(document).ready(function () { var flvPlayer = null; $('#playButton').on('click', function () { if (flvjs.isSupported()) { var videoElement = document.getElementById('rtmpVideo'); flvPlayer = flvjs.createPlayer({ type: 'flv', isLive: true, cors: true, hasAudio: false, hasVideo: true, enableStashBuffer: true, url: '你的FLV视频流地址' }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); videoElement.onwaiting = function () { videoElement.poster = "static/img/lod/1.gif"; }; } else { alert("当前浏览器不支持 FLV 播放"); } }); $('#pauseButton').on('click', function () { if (flvPlayer) { flvPlayer.pause(); } }); }); </script> </body> </html> ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值