VideoJS | 易学教程

video.js 视频自动全屏播放

阅读更多关于 video.js 视频自动全屏播放

一 . 视频全屏可以通过css定义宽高100%来实现。 .videoBox{ width: 100 % ; height: 100 % ; } #example_video{ width: 100 % ; height: 100 % ; } <div class = " videoBox " > <video id= " example_video " class = " video-js vjs-default-skin vjs-big-play-centered " muted autoplay controls preload= " none " width= " 640 " height= " 264 " poster = " http://video-js.zencoder.com/oceans-clip.png " data-setup= " {} " > 　　<source src= " https://wts.itqiche.com/u5/car_u5_video/XuHang.mp4 " type= ' video/mp4 ' /> </video> </div> 二. 视频打开页面自动播放。 1. 给video标签加入<video muted></video> 静音即可。 2. body下面加入js代码。 <script type= " text

GB28181、RTSP监控视频WEB多窗口无插件播放

阅读更多关于 GB28181、RTSP监控视频WEB多窗口无插件播放

完成运行效果图：一、四分屏展示样式布局 ###1.通过html、css等来进行样式排版### 根据需求的四分屏的样式；来合理的划分出四个大块，分别用于放置四个播放器；以四等分结构为例进行前端的排版； html样式布局： <div class="row col-sm-9 video-show"> <div class="row col-sm-9 video-show"> <div class="col-md-6 window1 video-window" alt="1"> </div> <div class="col-md-6 window2 video-window" alt="2"> </div> <div class="col-md-6 window3 video-window" alt="3"> </div> <div class="col-md-6 window4 video-window" alt="4"> </div> </div> CSS样式的定义： .video-window{ float: left; margin-left: 1%; margin-bottom: 1%; width: 48%; height: 0; position: relative; padding-bottom: 25%; background-color: #000; }

如何把设备实时推送过来的帧图片流转成直播流进行直播？【hls】【帧图片】【直播】【udp】

阅读更多关于如何把设备实时推送过来的帧图片流转成直播流进行直播？【hls】【帧图片】【直播】【udp】

如何把设备实时推送过来的帧图片流转成直播流进行直播？非互动直播流（帧图片转直播流）背景：因种种原因，android设备仅做到了通过udp把摄像头帧图片实时推送到了服务器。业务要求在手机h5，或pc电脑浏览器上都能观看实时直播（仅画面）。实现思虑： 1、参考https://blog.csdn.net/redfoxtao/article/details/78080924 可以把图片生成rtmp直播流。使用了FrameRecorder 2、参考https://blog.csdn.net/ldddd_/article/details/105855414 使用DatagramSocket启动udp端口监听接收图片报文。 3、将图片报文替换第一步中的固定图片（BufferedImage）。 4、安装部署windows版的nginx-rtmp服务器直接从https://github.com/illuspas/nginx-rtmp-win32/tree/dev 下载的配置好rtmp的完整nginx服务包。 5、下载ffmpeg验证nginx-rtmp服务是否正常。 ffmpeg下载地址：https://github.com/BtbN/FFmpeg-Builds/releases 我下载的ffmpeg-N-100471-gbff6fbead8-win64-gpl.zip 这个版本。

利用H5实现RTMP流的WEB移动端直播

阅读更多关于利用H5实现RTMP流的WEB移动端直播

主要实现方式：使用H5的video 元素结合H5的网络频播放器（video.js）实现rtmp流的直播播放 video.js 介绍 Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。优点： 1.它是开源免费的，你可以在github很容易的获取它的最新代码。 2.使用它非常的容易，只要花几秒钟就可以架起一个视频播放页面。 3.它几乎兼容所有的浏览器，并且优先使用html5，在不支持的浏览器中，会自动使用flash进行播放。 4. 界面可以定制，纯javascript和css打造。说明文档也非常的详细。注：html5的video标签只支持mp4、webm、ogg三种格式，不支持flv，flash格式， flv格式是flash专用的，rtmp流为flv格式的，必须使用flash播放器，在video.js内部可以检测浏览器是否支持html5播放器直接播放，如果不支持内部会自动调用浏览器的flash播放器播放视频。Edge、谷歌浏览器中网站默认是禁用flash的，手动设置为允许flash即可代码示例 1 <! DOCTYPE html > 2 < html > 3 < head > 4 < meta charset ="UTF-8" > 5 < title

H5浏览器播放RTMP直播流

阅读更多关于 H5浏览器播放RTMP直播流

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/5.19/video.min.js"></script> </head> <body> <video id="my-player" class="video-js" controls preload="auto" poster="//vjs.zencdn.net/v/oceans.png" data-setup='{}'> <source src='rtmp://live.hkstv.hk.lxdns.com/live/hks' type='rtmp/flv'/> </p> </video> <script type="text/javascript"> var player = videojs('my-player'); var options = {}; var player = videojs('my-player', options, function onPlayerReady() {

rtmp播放流媒体

阅读更多关于 rtmp播放流媒体

开始接触不太清楚rtmp协议的流，后来折腾了一番采用了videojs的插件下面是案例 videojs案例 1 < html > 2 < head > 3 < title ></ title > 4 5 < meta charset ="UTF-8" name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" > 6 < meta name ="apple-mobile-web-app-capable" content ="yes" /> 7 8 < script type ="text/javascript" src ="./src/jquery-1.7.2.min.js" ></ script > 9 < script src ="./src/video_5.19.min.js" ></ script > 10 < link href ="http://vjs.zencdn.net/5.19/video-js.min.css" rel ="stylesheet" > 11 </ head > 12 < body > 13 14 < div class ="page" > 15 < div class ="pinch-zoom" > 16 <

大华海康摄像头视频拉流

阅读更多关于大华海康摄像头视频拉流

流程技术海康&大华&DSS获取RTSP 实时流海康： rtsp://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/av_stream 说明： username: 用户名。例如admin。 password: 密码。例如12345。 ip: 为设备IP。例如 192.0.0.64。 port: 端口号默认为554，若为默认可不填写。 codec：有h264、MPEG-4、mpeg4这几种。 channel: 通道号，起始为1。例如通道1，则为ch1。 subtype: 码流类型，主码流为main，辅码流为sub。栗子： IPC rtsp://admin:123456@192.168.18.105:554/h264/ch1/main/av_stream NVR rtsp://admin:123456@192.168.18.106:554/Streaming/Channels/101 说明： 101，第一个1代表通道，最后一个1代表麻溜。大华： rtsp://[username]:[password]@[ip]:[port]/cam/realmonitor?channel=1&subtype=0 说明: username: 用户名。例如admin。 password: 密码。例如admin。 ip:

前端Web浏览器基于Flash如何实时播放监控视频画面（前言）之流程介绍

阅读更多关于前端Web浏览器基于Flash如何实时播放监控视频画面（前言）之流程介绍

[关键字：前端浏览器如何播放RTSP流画面、前端浏览器如何播放RTMP流画面] 本片文章只是起到抛砖引玉的作用，能从头到尾走通就行，并不做深入研究。为了让文章通俗易懂，尽量使用白话描述。考虑到视频延迟性问题，本次采用RTSP —> RTMP方案此篇只陈述如何使前端Web浏览器实时播放出监控视频画面的流程。由于每个步骤中间涉及的小细节很多，汇总在一起可能显得过于啰嗦，臃肿，所以分篇幅介绍。流程如下：获取监控摄像头的RTSP流 Windows搭建（RTMP）流媒体服务器使用ffmpeg将RTSP流转发至刚刚搭建的流媒体服务器，就是所谓的 '推流' 前端Web浏览器使用JS插件从流媒体服务器获取RTMP流并播放，就是所谓的 '拉流' 知道了这四个步骤，我们再把步骤 '问题化'，得出以下四篇文章：前端Web浏览器基于Flash如何实时播放监控视频画面（一）之获取监控摄像头的RTSP流前端Web浏览器基于Flash如何实时播放监控视频画面（二）之Windows搭建（RTMP）流媒体服务器前端Web浏览器基于Flash如何实时播放监控视频画面（三）之使用ffmpeg '推流' 前端Web浏览器基于Flash如何实时播放监控视频画面（四）之使用videoJs '拉流' 来源： oschina 链接： https://my.oschina.net/u/4360424/blog

videojs在实时流的情况下暂停和播放

阅读更多关于 videojs在实时流的情况下暂停和播放

问题是videojs在实时流(live)的情况下暂停然后不能再次播放单击播放区只能暂停不能再次播放 var techClick=false; $("#localVideo .vjs-button").on("click",function(){ /* if($('div').is('.vjs-paused')){ vid.play(); } if($('div').is('.vjs-playing')){ vid.pause(); } */ if(techClick){ vid.play(); } techClick=!techClick; }); $("#localVideo .vjs-tech").on("click",function(){ if(techClick){ vid.play(); } techClick=!techClick; }); 二合一 var localVideoTechClick=false; $("#localVideo .vjs-button,#localVideo .vjs-tech").on("click",function(){ if(localVideoTechClick){ localVideoVid.play(); } localVideoTechClick=!localVideoTechClick; }); 来源： oschina

mp4 转 m3u8 用h5播放

阅读更多关于 mp4 转 m3u8 用h5播放

先安装好安装ffmpeg工具然后在mp4的文件目录上用cmd 命令 ffmpeg -i 135M.mp4 -c:v libx264 -hls_time 10 -hls_list_size 0 -c:a aac -strict -2 -f hls 135M.m3u8 将其转成m3u8格式（命令简单解释下： -hls_time 60: 设置每片的长度，我这里是60秒，为一个片段。 -hls_list_size 0:设置播放列表保存的最多条目，我这里设置为0会保存有所片信息，默认值为5 更多命令可以百度或Google ）可以直接使用video.js播放,直接一个index.html <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>MP4ToM3U8</title> <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"> <script src="https://unpkg.com/video.js/dist/video.js"></script> <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"><

订阅 VideoJS