videojs 直播播放HLS流 h264

最新推荐文章于 2024-08-08 10:52:56 发布
最新推荐文章于 2024-08-08 10:52:56 发布
阅读量2k 收藏 2
点赞数
分类专栏： 其他 文章标签： html css videojs hls h.264
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ffzhihua/article/details/120341736
版权
本文介绍了如何使用videojs在网页中实现HLS直播流的播放，特别指出videojs仅支持H264格式的视频编码。
摘要由CSDN通过智能技术生成 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />

    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
    <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video
        id="my-video"
        class="video-js  vjs-big-play-centered"
        controls
        preload="auto"
        width="640"
        height="264"
        data-setup="{}"

>
    <source src="http://video.xuecheng.com/video/lucene_ts/lucene.m3u8" type="application/x-mpegURL"/>
    <p class="vjs-no-js">
        To view this video please enable JavaS
最低0.47元/天 解锁文章
秋天的春
关注
专栏目录
H264&H265;&RTMP;标准文档
04-24
压缩包内包含三种标准文档。H264和H265有ISO/IEC和T-ITU两种版本，ITU版本更新更详细，但是没有目录标签，查起来不太方便。RTMP是最新的1.0版本。
html5 h265播放器,PC端播放H265
weixin_36059856的博客
06-16 8128
说明需要在PC端浏览器(Chrome)中播放直播视频，视频格式有H264/H265。有不少三方库可以实现。通过video.js(支持H264，不支持H265)videojs-contrib-hls embedVideo.js Example Embeddata-setup='{}'>参考地址：通过hls.js(支持H264，不支持H265)pc play m3u8(hlsjs)video {...
vue2播放（大华）实时视频流-h264、h265
a895544608的博客
07-19 1583
点击链接->在线开放文档->快速入门->下载最新demo->里面的demo可以测试视频流是否能正常播放（不能的话就质问后端）三、视频播放器-wsplayers（因为公司是和大华有合作、通过大华官网看他们播放器很流畅.于是）不知是是不是我个人原因、h264可以正常播放、h265就歇了，果断换播放器。缺点：h264很流畅、h265稍卡、h265+ 硬解码两个视频cpu直接拉满。优点：h264、h265、h265+ 及各种小牌摄像头都能播放。优点：h264、h265、h265+ 及各种小牌摄像头都能播放。
VideoJS播放hls视频
最新发布
on1yLX的博客
08-08 339
它的工作原理是把整个流分成一个个小的基于HTTP的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。在开始一个流媒体会话时，客户端会下载一个包含元数据的extended M3U (m3u8)playlist文件，用于寻找可用的媒体流。HLS只请求基本的HTTP报文，与实时传输协议（RTP)不同，HLS可以穿过任何允许HTTP数据通过的防火墙或者代理服务器。缓冲播放，延迟较长，不适用监控、直播等适时场景。
h264js解码直播解码显示
qianbo042311的博客
07-19 2749
h264 解码前端显示 下载该前端代码 h264 分为几种，一种为baseline，一种为main，一种为pro 这里前端使用js解码的库只能支持baseline方式，因此必须在摄像头里面如海康或者大华的编码设置h264成为baseline模式才能正确解码。 1、准备一个websocket server websocketserver 是转发使用的，协议接收应该选取sip协议也就是国标gb28181是最好的，再次就是使用rtsp协议，这里先不涉及这两种协议，先介绍使用h264 解码 websocket se
【vue2】前端如何播放rtsp 视频流，拿到rtsp视频流地址如何处理，海康视频rtsp h264 如何播放
热门推荐
amoureux555的博客
11-16 1万+
【vue2】前端如何播放rtsp 视频流，拿到rtsp视频流地址如何处理，海康视频rtsp h264 如何播放
hls(m3u8)格式视频流播放
不靠谱的作曲家
10-24 3135
第一种方式不仅支持安卓系统同时支持苹果系统，但是不支持h265格式的视频流，仅支持h264格式的视频流。第三种方式不仅支持安卓系统同时支持苹果系统，不仅支持h264格式的视频流还支持h265格式的视频流。第二种方式仅支持安卓系统、但是不支持h265格式的视频流，仅支持h264格式的视频流。其中libDecoder.wasm文件，一定要放在项目 “注意：必须使用video标签。
Vue 播放监控m3u8视频流格式 （Video.js）篇
qq_42957741的博客
03-04 7068
因业务需求，对接监控显示自己的系统中。 前端框架vue 监控返回格式m3u8，视频流格式h264，如果视频流格式是h265的建议先把流转换h264。 4.本篇文章讲解video.js插件播放m3u8 1. npm安装和引入 npm install --save video.js npm install --save videojs-contrib-hls 2引入对应css 我们需要引入videojs的css文件，例如在main.js中引入 import 'video.js/dist/video-j..
uniapp引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频
11-15
在本文中，我们将深入探讨如何在uniAPP中引入Dplayer.js和hls.js库，以实现对m3u8直播流视频的解析和播放。uniAPP是一个基于Vue.js的跨平台开发框架，允许开发者编写一次代码，应用于多端运行，包括iOS、Android、...
HLSVideoPlayerApp:iOS 应用程序可以播放 HLS 视频
07-10
在iOS平台上，开发一款能播放HLS（HTTP Live Streaming）视频的应用程序是一项常见的任务，尤其对于希望提供流畅、适应性强的视频流体验的开发者来说。HLS是一种由Apple公司开发的流媒体协议，它允许视频内容通过...
html5播放rtsp视频流.zip
05-27
为了在HTML5页面中播放RTSP流，我们需要借助额外的技术和工具，如Node.js和FFmpeg。 Node.js是一个基于Chrome V8引擎的JavaScript运行环境，允许开发者在服务器端使用JavaScript编写应用。在这个场景下，Node.js...
videojs播放rtmp流，测试代码
05-21
videojs播放rtmp流，测试代码，需要部署到服务器上(包括但不限于tomcat，iis）, 路径为test/tes2.html。videojs播放rtmp流，测试代码，需要部署到服务器上(包括但不限于tomcat，iis）, 路径为test/tes2.html。videojs播放rtmp流，测试代码，需要部署到服务器上(包括但不限于tomcat，iis）, 路径为test/tes2.html。
videojs 使用Demo
09-16
videojs 使用Demo
hls.min.js
06-01
return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/hls.js/dist/",e(e.s=7)}([function(t,e,r){"use strict";function i(){}function a(t,e){return e="["+t+"] >...
pps.rar_流媒体_流媒体播放
09-24
编码是将原始的音视频数据转换为适合在网络上传输的格式，如H.264或AAC等高效编码标准。传输则涉及到TCP/IP协议、HTTP、RTMP或HLS等流媒体协议，它们确保数据能够稳定且连续地从服务器传递到客户端。解码是将传输的...
js检测视频是不是h264编码格式
weixin_43410094的博客
10-15 762
【代码】js检测视频是不是h264编码格式。
基于vue使用videojs播放m3u8直播流
m0_54788390的博客
02-16 1971
videojs常见问题及解决方案
【大华摄像机hls拉流vue使用videojs展示 一个页面多个视频同时播放】
qq_39523488的博客
11-27 7937
这是我在做项目中的一部分内容，通过大华hls拉流的方式拉取视频进行前端的展现，我们使用videojs来进行视频的展示。
Javascript 播放H.264，视频截图 集合
happy08god的专栏
09-06 2979
  最近帮别人搜索html5 player相关的问题，在网上查看了一些资料。整理一下网上搜到的一些关于 Javascript实现H.264视频流播放，视频截图功能的链接。因为我不是从事前端开发相关的工作， 对前端相关的知识了解有限，所以无法提供现成的解决方案，或者准确定位最合适的1-2个链接。 只能把看上去还可以的链接保存下来，以作记录： (1) 视频直播 1. use html5 vi...
vue播放h264格式的流
06-11
Vue可以通过使用`video`标签来播放H.264格式的视频流。以下是一个简单的Vue组件，可以播放一个H.264格式的视频流： ```vue <template> <div> <video ref="video" autoplay controls></video> </div> </template> <script> export default { mounted() { const video = this.$refs.video; const streamUrl = 'http://example.com/stream'; // 替换成实际的流地址 if (Hls.isSupported()) { const hls = new Hls(); hls.loadSource(streamUrl); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED, () => { video.play(); }); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = streamUrl; video.addEventListener('loadedmetadata', () => { video.play(); }); } }, }; </script> ``` 在这个组件中，我们使用`video`标签来创建一个视频播放器。我们首先检查浏览器是否支持HLS协议，如果支持，则使用Hls.js库来加载和播放视频流；如果不支持，则直接使用`video`标签来播放流。请注意，这里的视频流地址需要替换成实际的流地址。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值