hls网页播放器实现

hls网页播放器实现

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。本事记录内容只要是使用bootstrap的modal框实现点击按钮弹出视频框。播放的视频格式是hls(m3u8).video.js的详细使用方法可参考这里

1. 文件引入

<link href="http://cdn.bootcss.com/video.js/6.0.0-RC.5/alt/video-js-cdn.min.css" rel="stylesheet"><script src="http://cdn.bootcss.com/video.js/6.0.0-RC.5/video.js"></script>
<!-- PC 端浏览器不支持播放 hls 文件(m3u8), 需要 videojs-contrib-hls 来给我们解码 -->
<script src="http://cdn.bootcss.com/videojs-contrib-hls/5.3.3/videojs-contrib-hls.js"></script><-设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件->
<script>videojs.options.flash.swf = "video-js.swf";//此处的swf路径要改成自己的
</script>

2. 模态框设置

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"backdrop="false" keyboard="false"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="closeVideo()">&times;</button><h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4></div><div class="modal-body" id="modal-body">//video 标签就被动态添加到这里</div><div class="modal-footer"><button type="button" class="btn btn-primary" onclick="closeVideo()">关闭</button></div></div><!-- /.modal-content --></div><!-- /.modal -->
</div>

3. js函数

/动态添加播放器，显示模态框function playVido() {$("#modal-body").append("<video id=\"hls-video\" class=\"video-js vjs-default-skin  vjs-big-play-centered\" width=\"540px\" height=\"480px\"\n" +"                       playsinline webkit-playsinline\n" +"                       autoplay controls preload=\"auto\"\n" +"                       x-webkit-airplay=\"true\" x5-video-player-fullscreen=\"true\" x5-video-player-typ=\"h5\">\n" +"                    <source id=\"hls-source\" src=\"\" type=\"application/x-mpegURL\">\n" +"                </video>\n")var videoUrl = "http://zhibo.jinlu666.com:10080/frecord/jinlu107/20190124/20190124140000/jinlu107_record.m3u8";$("#hls-source").attr("src", videoUrl);var myplayer = videojs('hls-video');myplayer.play();$('#myModal').modal('show');}*** 该方法解决模态框关闭时，视频仍然播放的问题！思路就是在关闭的时候把播放器移除掉，在播放的时候重新动态添加播放器即可*/function closeVideo() {$("#hls-source").attr("src", "");var oldPlayer = document.getElementById('hls-video');videojs(oldPlayer).dispose();$('#myModal').modal('hide');}

Liveweb是好游科技自主开发的网页播放器，支持 RTSP、RTMP、HTTP、HLS、UDP、RTP、File 等多种流媒体协议播放，同时也有多种显示方式 (GDI,D3D) 及格式 (RGB24,YV12,YUY2,RGB565)，经过 7x24 小时连续拷机测试，能够很好的处理断连.

iveweb是可支持H.264/H.265视频播放的流媒体播放器，性能稳定、播放流畅，可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等，具备较高的可用性。liveweb还拥有Windows、Android、iOS版本，其灵活的视频能力，极大满足了用户的多样化场景需求。

liveweb具备较强的灵活性，在视频直播过程中liveweb可通过H5进行视频解码，只要客户端支持H5，就能完美进行视频的无插件直播，同时还支持大码率视频直播，并可支持H.264、H.265两种编码格式。如果大家正在找寻一款供能强大的流媒体播放器，那么liveweb将会是一个不错的选择，我们也欢迎大家的了解和试用