phpstudy网站建设教程,html代码翻译,淘宝刷单网站建设,深圳正规seo前言 因为项目测试需要#xff0c;我需要可以快速知道自己推流的多路视频流质量#xff0c;于是我想到可以使用html网页来播放视频#xff0c;实现效果极其简单#xff0c;方法有好几种#xff0c;以下是几种记录#xff1a; 注意#xff1a;测试过#xff0c;VLC需要使…前言 因为项目测试需要我需要可以快速知道自己推流的多路视频流质量于是我想到可以使用html网页来播放视频实现效果极其简单方法有好几种以下是几种记录 注意测试过VLC需要使用360急速浏览器于是以下都是基于360急速浏览器测试的
一、Demo1iframe
video_url_player.html代码:
html
headstylehtml,body,div{margin:1px;padding:0px;}td{padding:0px 1px 1px 0px;}table{border-collapse:collapse;border:0px solid #ff0000;text-align:center;}/style
/head
body
table width100% height100%trtdiframe frameborder0 srchttp://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width100% height100%/iframe/tdtdiframe frameborder0 srchttp://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width100% height100%/iframe/tdtdiframe frameborder0 srchttp://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width100% height100%/iframe/td/trtrtdiframe frameborder0 srchttp://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width100% height100%/iframe/tdtdiframe frameborder0 srchttp://vfx.mtime.cn/Video/2021/11/16/mp4/211116131456748178.mp4 width100% height100%/iframe/td/tr
/table
/body
/html
效果 说明
1. 支持几种常见的播放格式无论是本地还是网络视频流都可以
2. 支持的格式不是特别多一些特殊格式无法播放 二、Demo2VLC插件 需要安装VLC然后就可以了不过浏览器必须使用低版本的浏览器测试一下很多浏览器不行但是发现360急速浏览器就不需要所谓的低版本。
html代码
html
head
/headbody embed typeapplication/x-vlc-plugin pluginspagehttp://www.videolan.orgversionVideoLAN.VLCPlugin.2 width320 height240 idvlctargetfile:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4/embedembed typeapplication/x-vlc-plugin pluginspagehttp://www.videolan.orgversionVideoLAN.VLCPlugin.2 width320 height240 idvlctargetfile:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4/embedembed typeapplication/x-vlc-plugin pluginspagehttp://www.videolan.orgversionVideoLAN.VLCPlugin.2 width320 height240 idvlctargetfile:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4/embedembed typeapplication/x-vlc-plugin pluginspagehttp://www.videolan.orgversionVideoLAN.VLCPlugin.2 width320 height240 idvlctargetfile:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4/embedembed typeapplication/x-vlc-plugin pluginspagehttp://www.videolan.orgversionVideoLAN.VLCPlugin.2 width320 height240 idvlctargetfile:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4/embedembed typeapplication/x-vlc-plugin pluginspagehttp://www.videolan.orgversionVideoLAN.VLCPlugin.2 width320 height240 idvlctargetfile:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4/embedembed typeapplication/x-vlc-plugin pluginspagehttp://www.videolan.orgversionVideoLAN.VLCPlugin.2 width320 height240 idvlctargetfile:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4/embedembed typeapplication/x-vlc-plugin pluginspagehttp://www.videolan.orgversionVideoLAN.VLCPlugin.2 width320 height240 idvlctargetfile:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4/embedembed typeapplication/x-vlc-plugin pluginspagehttp://www.videolan.orgversionVideoLAN.VLCPlugin.2 width320 height240 idvlctargetfile:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4/embedembed typeapplication/x-vlc-plugin pluginspagehttp://www.videolan.orgversionVideoLAN.VLCPlugin.2 width320 height240 idvlctargetfile:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4/embedembed typeapplication/x-vlc-plugin pluginspagehttp://www.videolan.orgversionVideoLAN.VLCPlugin.2 width320 height240 idvlctargetfile:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4/embedembed typeapplication/x-vlc-plugin pluginspagehttp://www.videolan.orgversionVideoLAN.VLCPlugin.2 width320 height240 idvlctargetfile:///C:/Users/YJL/Desktop/testVideo/1080p_60fps_h264.mp4/embed
/body
/html
效果 说明 可以自由排布以及支持非常多的格式只要安装好环境以后就可以使用只是浏览器比较麻烦但是效果和质量是真的好。 三、Demo3使用一些常见的js
优势嵌入简单而且自动使用OpenGL渲染有些支持硬件加速。
1. veoplayer
html代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /titlevideoplayer/titlescript src./veoplayer.global.min.js/scriptstyle/* 容器元素 */.container {display: grid;grid-template-columns: repeat(3, 1fr); /* 列数为3每列平均分配剩余空间 */grid-template-rows: repeat(4, 1fr); /* 行数为4每行平均分配剩余空间 */grid-gap: 10px; /* 单元格之间的间距 */}/* 单元格元素 */.cell {background-color: #ccc; /* 背景颜色 */padding: 20px; /* 内边距 */text-align: center; /* 文字居中 */}/style/headbodycanvas idvideo-canvas/canvasscript typetext/javascriptdocument.addEventListener(click, () {let player new JSMpeg.Player(rtsp://127.0.0.1:8554/live,{canvas: document.getElementById(jsmpeg-canvas),// 要在用户点击过页面后才可以播放声音// audio: false,})}, { once: true })/scriptdiv classcontainerdiv classcell idveo0/divdiv classcell idveo1/divdiv classcell idveo2/divdiv classcell idveo3/divdiv classcell idveo4/divdiv classcell idveo5/divdiv classcell idveo6/divdiv classcell idveo7/divdiv classcell idveo8/divdiv classcell idveo9/divdiv classcell idveo10/divdiv classcell idveo11/div/divscript typetext/javascriptlet player0 new VeoPlayer({id: veo0,autoplay: true,url: ./test.mp4,height: 660,width: 445,style: {themeColor: #91CB40,processColor: #91CB40,animation: true,processHeight: 8,},});/scriptscript typetext/javascriptlet player1 new VeoPlayer({id: veo1,autoplay: true,url: ./test.mp4,height: 660,width: 445,style: {themeColor: #91CB40,processColor: #91CB40,animation: true,processHeight: 8,},});/scriptscript typetext/javascriptlet player2 new VeoPlayer({id: veo2,autoplay: true,url: ./test.mp4,height: 660,width: 445,style: {themeColor: #91CB40,processColor: #91CB40,animation: true,processHeight: 8,},});/scriptscript typetext/javascriptlet player3 new VeoPlayer({id: veo3,url: ./test.mp4,height: 660,width: 445,style: {themeColor: #91CB40,processColor: #91CB40,animation: true,processHeight: 8,},});/scriptscript typetext/javascriptlet player4 new VeoPlayer({id: veo4,url: ./test.mp4,height: 660,width: 445,style: {themeColor: #91CB40,processColor: #91CB40,animation: true,processHeight: 8,},});/scriptscript typetext/javascriptlet player5 new VeoPlayer({id: veo5,url: ./test.mp4,height: 660,width: 445,style: {themeColor: #91CB40,processColor: #91CB40,animation: true,processHeight: 8,},});/scriptscript typetext/javascriptlet player6 new VeoPlayer({id: veo6,url: ./test.mp4,height: 660,width: 445,style: {themeColor: #91CB40,processColor: #91CB40,animation: true,processHeight: 8,},});/scriptscript typetext/javascriptlet player7 new VeoPlayer({id: veo7,url: ./test.mp4,height: 660,width: 445,style: {themeColor: #91CB40,processColor: #91CB40,animation: true,processHeight: 8,},});/scriptscript typetext/javascriptlet player8 new VeoPlayer({id: veo8,url: ./test.mp4,height: 660,width: 445,style: {themeColor: #91CB40,processColor: #91CB40,animation: true,processHeight: 8,},});/scriptscript typetext/javascriptlet player9 new VeoPlayer({id: veo9,url: ./test.mp4,height: 660,width: 445,style: {themeColor: #91CB40,processColor: #91CB40,animation: true,processHeight: 8,},});/scriptscript typetext/javascriptlet player10 new VeoPlayer({id: veo10,url: ./test.mp4,height: 660,width: 445,style: {themeColor: #91CB40,processColor: #91CB40,animation: true,processHeight: 8,},});/scriptscript typetext/javascriptlet player11 new VeoPlayer({id: veo11,url: ./test.mp4,height: 660,width: 445,style: {themeColor: #91CB40,processColor: #91CB40,animation: true,processHeight: 8,},});/script/body
/html 一样可以支持多种格式效果还不错不过支持的没有VLC的多。
相关文件看文章后面源码 2. kurento 播放rtsp
!DOCTYPE html
html
head
meta charsetutf-8
meta http-equivcache-control contentno-cache
meta http-equivpragma contentno-cache
meta http-equivexpires content0
meta nameviewport contentwidthdevice-width, initial-scale1.0 /
link relshortcut icon href./img/kurento.png typeimage/png /script src./js/jquery.min.js/scriptscript src./js/kurento-client.min.js/script
script src./js/kurento-utils.min.js/scriptscript src./js/index.js/script
titleKurento RTSP to WebRTC player/title
/headbodydiv classcontainerdiv classpage-headerh1Kurento RTSP to WebRTC player/h1/divdiv classrowdiv classcol-md-5h3播放窗口/h3video idvideoOutput autoplay width480px height360px styleborder: 1px solid #857f7f; poster./img/webrtc.png/video/brrtsp/http地址: input stylewidth:350px; idaddress typetext/br/br/divdiv classcol-md-2a idstart href# classbtn btn-successspanclassglyphicon glyphicon-play/span 播放/abr / br / aidstop href# classbtn btn-dangerspanclassglyphicon glyphicon-stop/span 暂停/a/div/div/div
/body
/html这个是别人的代码测试可用 3. video.js
这个没测试成功 4.其他nodejs开启服务实现网络播放rtsp
【前端】rtsp 与 rtmp 视频流的播放方法_Never Yu-华为云开发者联盟 相关源码
html播放多路视频官方版下载丨最新版下载丨绿色版下载丨APP下载-123云盘
