播放器选型

video.js

链接: GitHub
https://unpkg.com/video.js/dist/video-js.min.css
https://unpkg.com/video.js/dist/video.min.js

自定义ui
多插件
体积大
功能齐全
符合线上场景

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
</head>
<body>
<video id="my-player" class="video-js" controls preload="auto" poster="//vjs.zencdn.net/v/oceans.png" data-setup='{}'><source src="https://gcalic.v.myalicdn.com/gc/gccntv240-lzb01_1/index.m3u8?contentid=2820180516001" type="application/x-mpegURL">
</video>
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
<script type="text/javascript">// var player = videojs('my-player');var options = {width:400,height:200};var player = videojs('my-player', options, function onPlayerReady() {videojs.log('Your player is ready!');// In this context, `this` is the player that was created by Video.js.// this.play();// How about an event listener?this.on('ended', function() {videojs.log('Awww...over so soon?!');});});
</script>
</body>
</html>

hls.js

体积小易扩展
适合hls类型的直播、点播
链接: GitHub
https://cdn.jsdelivr.net/npm/hls.js@latest

下面demo样式有点问题，就不注重了，主要是能让视频播放出来。


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.player{width: 200px;height: 100px;position: relative;}.player video{width: 100%;height: 100%;}.player .btn{width: 40px;height: 40px;border-radius: 50%;position: absolute;left: 50%;top: 50%;margin: -35px auto auto -35px;padding: 15px;background-color: rgba(255,255,255,0.5);line-height: 40px;display: none;}.player .btn:hover{background: rgba(255,255,255,0.7);}.player .btn:before{border: 20px solid #ddd;border-top-color: transparent;border-bottom-color: transparent;border-right-color: transparent;content: ' ';display: block;margin-left: 10px;width: 0;height: 0;}.player .btn:before:hover{border-left-color: #fff;}.player.pause .btn{display: block;}</style>
</head>
<body>
<div class="player"><!--页面未加载完成时就播放音频chrome会报错 所以默认静音--><video id="video" muted></video><em class="btn"></em>
</div><script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>var Hls = window.Hls;var video = document.getElementById('video');var btn = document.querySelector('.btn');var player = document.querySelector('.player');var videoSrc = 'http://live.local.com/stream.m3u8';if (Hls.isSupported()) {var hls = new Hls();hls.loadSource(videoSrc);hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED, function() {// video.play();});}else if (video.canPlayType('application/vnd.apple.mpegurl')) {video.src = videoSrc;video.addEventListener('loadedmetadata', function() {// video.play();});}// 自定义播放暂停按钮btn.addEventListener('click',function () {if(video.paused){console.log(111)video.play()}else{console.log(222)video.pause()}})btn.addEventListener('play',function () {player.className = 'palyer';})btn.addEventListener('pause',function () {player.className = 'palyer pause';})// 点击视频播放暂停video.addEventListener('click',function () {if(video.paused){video.play()}else{video.pause()}})
</script>
</body>
</html>

flv.js

B站开源
https://github.com/Bilibili/flv.js

Nginx+ffmpeg 搭建流媒体服务器（四）：H5直播演练相关推荐

nginx+ffmpeg搭建流媒体服务器
安装ffmpeg: 下载FFmpeg和libx264的包 ffmpeg-2.4.1.tar.bz2 last_x264.tar.bz2 libx264需要yasm,所以先安装yasm apt-get ...
ffmpeg libx264_nginx+ffmpeg搭建流媒体服务器（直播流）
这里实现了简单nginx+ffmpeg 推本地mp4视频文件的功能,以后将会继续更新环境系统环境:CentOS release 6.7 (Final) 需求利用nginx和ffmpeg搭建流媒体 ...
音视频开发（8）---nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器
nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/redstarofsle ...
Linux---nginx+ffmpeg搭建流媒体服务器
这里实现了简单nginx+ffmpeg 推本地mp4视频文件的功能,以后将会继续更新环境系统环境:CentOS release 6.7 (Final) 需求利用nginx和ffmpeg搭建流媒体 ...
srs服务器播放文件,使用SRS+ffmpeg搭建流媒体服务器播放m3u8格式视频
1.简介 srs是一个简单的流媒体开源直播软件,ffmpeg是完整的跨平台解决方案,用于记录,转换和流传输音频和视频. 2.相关官网下载页面:点击我到达在线演示播放页面:点击我到达 Git页面:点 ...
nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器
Nginx本身是一个非常出色的HTTP服务器,FFMPEG是非常好的音视频解决方案.这两个东西通过一个nginx的模块nginx-rtmp-module,组合在一起即可以搭建一个功能相对比较完善的流媒 ...
使用EasyDarwin + ffmpeg 搭建流媒体服务器，实现多台智能电视同步播放宣传视频
近期单位用户提出需求,需要在单位内部的9台安卓智能电视(小米电视)上同步播放用户提供的宣传视频,希望能够做到所有电视音视频同步播放(电视均位于食堂内部,使用内置扬声器,各电视间音频延迟不同会导致混响) ...
苹果手机直播显示服务器,搭建流媒体服务器（iOS直播）
写在前面开发一款直播app,肯定需要流媒体服务器,本篇主要讲解直播中流媒体服务器搭建,并且讲解了如何利用FFMPEG编码和推流,并且介绍了FFMPEG常见命令. 效果一.安装Homebrew 首先 ...
Nginx+jwPlay搭建流媒体服务器，记忆播放
1.具体的流媒体服务器的搭建参考博客: http://blog.chinaunix.net/uid-20639775-id-154556.html 具体可能编译的时候有个地方报错 /root/ngin ...

Nginx+ffmpeg 搭建流媒体服务器（四）：H5直播演练

H5直播演练

播放器选型

video.js

hls.js

flv.js

Nginx+ffmpeg 搭建流媒体服务器（四）：H5直播演练相关推荐

最新文章

热门文章