使用video.js播放HLS、FLV、MP4。

MP4、FLV、HLS、RTMP等协协和播放器之间的支持情况，参看这里。

一、主要JS插件：

jquery(v3.6.0)
video.js (v7.21.0，其它版本没试)
https://cdn.bootcdn.net/ajax/libs/video.js/7.21.0/video.min.js
flv.js (v4.2.8)
https://unpkg.com/flv.js/dist/flv.min.js
screenshot.js (Last time updated at August 04, 2017, 08:32:23)
https://www.webrtc-experiment.com/screenshot.js

二、demo代码。

具体步骤见demo说明。
附带截图功能。
PC端Chrome/Firefox/Edge等标准浏览器调试没问题。
demo要放到web服务环境。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>video.js播放HLS、FLV、MP4</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" /><link href="https://cdn.bootcdn.net/ajax/libs/video.js/7.21.0/video-js.min.css" rel="stylesheet"><style>body{margin:2rem;}.videoWarp {/*width: 30px;height: 20px;*/}/*进度条.video-js .vjs-progress-control {opacity: 1 !important;margin-right:9%;}*//*剩余时长*/.video-js .vjs-remaining-time{margin-right:7%;}/*截图按钮*/.screenshotBtn {position: absolute;top: 6px;right: 54px;}</style>
</head><body>
<div class="row"><div class="videoWarp col-md-4" id="videoWarp1"><video id="video1" class="video-js vjs-big-play-centered vjs-fluid" controls controlslist="nodownload"  preload="auto" crossOrigin="Anonymous"></video></div><div class="videoWarp col-md-4" id="videoWarp2"><video id="video2" class="video-js vjs-big-play-centered vjs-fluid" controls controlslist="nodownload" preload="auto" crossOrigin="Anonymous"></video></div><div class="videoWarp col-md-4" id="videoWarp3"><video id="video3" class="video-js vjs-big-play-centered vjs-fluid" controls controlslist="nodownload" preload="auto" crossOrigin="Anonymous"></video></div>
</div><div class="row"><div class="col-md-4" id=""><h2>FLV</h2></div><div class="col-md-4" id=""><h2>HLS</h2></div><div class="col-md-4" id=""><h2>MP4</h2></div>
</div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.21.0/video.min.js"></script><script src="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script><script src="https://unpkg.com/flv.js/dist/flv.min.js"></script><script src="https://www.webrtc-experiment.com/screenshot.js"></script><script type="text/javascript">let videoUrlFLV = 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv';let videoUrlHLS = 'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8';let videoUrlmp4 = 'http://vjs.zencdn.net/v/oceans.mp4';let videoPlayer = null;initVideoJS('video1','flvjs',videoUrlFLV);initVideoJS('video2','html5',videoUrlHLS);initVideoJS('video3','html5',videoUrlmp4);// 初始化Videojs插件function initVideoJS(vid,vtype,vurl) {let vSourceType ='';if (vtype === 'flvjs') {         //flv格式vSourceType = 'video/x-flv';} else if ((vtype === 'html5') && (vurl.substring(vurl.lastIndexOf(".") + 1) === "m3u8")) {      //hls格式vSourceType = 'application/x-mpegURL';} else if ((vtype === 'html5') && (vurl.substring(vurl.lastIndexOf(".") + 1) === "mp4")) {     //mp4格式vSourceType = 'video/mp4';} else {        //其它格式alert('Video Type Error ...');}videoPlayer = videojs(vid, {autoplay: true,     //自动播放controls: true,       //用户可以与之交互的控件loop: true,                //视频一结束就重新开始muted: true,            //默认情况下将使所有音频静音aspectRatio: '16:9',   //显示比率disablePictureInPicture:true,     //禁用画中画techOrder: [vtype],  //['HTML5',''flvjs'] 播放模式及顺序preload: "auto",         //预加载playsinline: true,  //解决在iPhone中播放时自动全屏问题controlBar: { // 设置控制条组件/* 设置控制条里面组件的相关属性及显示与否  */'remainingTimeDisplay':true,/* 使用children的形式可以控制每一个控件的位置，以及显示与否 */children: [{name: 'playToggle'},               // 播放/暂停按钮{name: 'volumePanel',               // 音量控制inline: false,                               // 竖直方式},{name: 'liveDisplay'},                   //直播流时，显示LIVE{name: 'progressControl'},            // 播放进度条{name: 'remainingTimeDisplay'},   // 剩余时长{name: 'FullscreenToggle'},            // 全屏]},flvjs: {mediaDataSource: {isLive: true,cors: true,withCredentials: false,},},sources: [{src: vurl,  type: vSourceType}],}, function () {});setTimeout(() => {videoPlayer.play();addScreenshotBtnHandle()}, 500)}//视频区域禁用右键$("#video1, #video2, #video3").bind('contextmenu', function(){return false;});// 添加截图按钮function addScreenshotBtnHandle(params) {$('.vjs-control-bar').append("<div class='screenshotBtn'><svg t='1619515761104' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='11028' width='15' height='15'><path d='M512 384c55.6 0 107.8 21.6 147.1 60.9S720 536.4 720 592s-21.6 107.8-60.9 147.1S567.6 800 512 800s-107.8-21.6-147.1-60.9S304 647.6 304 592s21.6-107.8 60.9-147.1S456.4 384 512 384z m0-64c-150.2 0-272 121.8-272 272s121.8 272 272 272 272-121.8 272-272-121.8-272-272-272z' p-id='11029' fill='#ffffff'></path><path d='M650.9 128l4.4 23.6C666.7 212.1 719.6 256 781.1 256H896c35.3 0 64 28.7 64 64v512c0 35.3-28.7 64-64 64H128c-35.3 0-64-28.7-64-64V320c0-35.3 28.7-64 64-64h114.9c61.6 0 114.5-43.9 125.8-104.4l4.4-23.6h277.8z m39.8-64H333.3c-7.7 0-14.3 5.5-15.7 13.1l-11.8 62.7c-5.7 30.3-32.1 52.2-62.9 52.2H128C57.3 192 0 249.3 0 320v512c0 70.7 57.3 128 128 128h768c70.7 0 128-57.3 128-128V320c0-70.7-57.3-128-128-128H781.1c-30.8 0-57.2-21.9-62.9-52.2l-11.8-62.7c-1.4-7.6-8-13.1-15.7-13.1z' p-id='11030' fill='#ffffff'></path><path d='M224 352h-64c-17.7 0-32-14.3-32-32s14.3-32 32-32h64c17.7 0 32 14.3 32 32s-14.3 32-32 32zM512 560c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z m0-64c-53 0-96 43-96 96s43 96 96 96 96-43 96-96-43-96-96-96z' p-id='11031' fill='#ffffff'></path></svg></div>")}// 截图按钮点击事件$(document).on('click', '.screenshotBtn', function () {const fileType = 'png';// 找到需要截图的video标签const video = $(this).parent().siblings("video")[0];//console.log(video);video.crossOrigin = "anonymous";const canvas = document.createElement('canvas');canvas.width = video.videoWidth;canvas.height = video.videoHeight;canvas.getContext('2d')    .drawImage(video, 0, 0, canvas.width, canvas.height);   // 图片大小和视频分辨率一致const strDataURL = canvas.toDataURL('image/' + fileType);         // canvas中video中取一帧图片并转成dataURLlet arr = strDataURL.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}const blob = new Blob([u8arr], {type: mime})const url = window.URL.createObjectURL(blob);downloadFile(url, 'png')})// 下载截图function downloadFile(blob, fileType) {const a = document.createElement('a')a.style.display = 'none'a.href = blobconst time = new Date().getTime()a.download = `${time}.${fileType}`document.body.appendChild(a)a.click()setTimeout(function () {document.body.removeChild(a)window.URL.revokeObjectURL(blob)}, 1000)}</script>
</body>
</html>

测试公用资源（发时可用）

RTSP
rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4
rtsp://213.34.225.97/axis-media/media.amp
rtsp://37.157.51.30/axis-media/media.amp
rtsp://71.83.5.156/axis-media/media.amp

FLV
https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv
https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv
https://www.sample-videos.com/video123/flv/720/big_buck_bunny_720p_1mb.flv

HLS
http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8
http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8
http://hls01open.ys7.com/openlive/f65a2cc9f9d9453fb349a338824efb9f.m3u8
http://hls01open.ys7.com/openlive/90ffd8fac3bb486b83cb1fa5cb0553f6.m3u8

RTMP
rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp
rtmp://ns8.indexforce.com/home/mystream

MP4
http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
http://vjs.zencdn.net/v/oceans.mp4
https://media.w3.org/2010/05/sintel/trailer.mp4

参考：

https://blog.csdn.net/weixin_45264424/article/details/127566450

Web端H5播放FLV、HLS、MP4 (二)相关推荐

Web端直接播放 .ts 视频及mux.js播放ts视频没有声音
最近项目中需要前端播放 .ts 格式视频,捣鼓了几天学习到很多知识,也发掘了一种优秀的解决方案,分享给有同样需求的同学. 常见方案在网上查找的大部分解决方案都是用诸如videojs等网页播放器,接收 ...
【rtsp流在Web端实时播放】使用 VUE + webrtc-steamer
rtsp流-视频播放操作系统:Win10 vue版本:vue2 一. 方法必须将rtsp通过播放器插件/服务器/- 转换为 flv/webrtc/- 最新在线可用rtsp码流地址(可用flv播放 ...
java后台移动端 h5 播放m3u8
1.知识点 m3u8 m3u8 是一种基于 HTTP Live Streaming 文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成.目前由 Apple.inc 率先提出的 ...
网络摄像头RTSP视频流WEB端实时播放实现方案
IPC视频流怎么实时在WEB浏览器播放,视频流格式是RTSP. 下面我整理了自己实现的方案以及网上看到的一些方案一.FFmpeg + nginx 将转 hls 通过 video.js 在支持h5浏览 ...
web 端h265播放器
最近找到一个h265播放器: https://github.com/goldvideo/h265player 需要注意的是这个h5 播放器只支持hls和MP4 播放器主要分为UI.Loader.数据处 ...
大华摄像头实现web端实时播放以及录像回放
文章目录前言一.在乐橙云平台上注册账号并添加设备创建应用二.利用云平台的api获取到前端展示需要的相关信息三.前端页面展示内容总结前言前段时间对接了大华摄像头,在此做一次总结,总体思路是 ...
网上播放.flv格式的二种程序
第一种: 1. <objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http: ...
如何在VUE框架的WEB端实时播放海康威视、大华RTSP视频流？
背景如果你问一个前端技术人员,近几年最火的前端框架技术是什么,肯定会有人说VUE,确实VUE凭借其简单特性赢得了大家的喜爱,而近期公司有个项目,需要在VUE框架网页上播放RTSP实时视频. 小编对目 ...
web端 m3u8播放器
m3u8文件介绍,请看 m3u8文件格式详解 m3u8播放器git地址,点击获取这个就是git上下载下来的文件目录,浏览器打开外面的index.htm,input里输入你的.m3u8文件的地址,点击 ...

Web端H5播放FLV、HLS、MP4 (二)

使用video.js播放HLS、FLV、MP4。

一、主要JS插件：

二、demo代码。

测试公用资源（发时可用）

参考：

Web端H5播放FLV、HLS、MP4 (二)相关推荐

最新文章

热门文章