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');}

hls网页播放器实现相关推荐

最简单的基于Flash的流媒体示例网页播放器（HTTP，RTMP，HLS）
===================================================== Flash流媒体文章列表: 最简单的基于Flash的流媒体示例:RTMP推送和接收(Acti ...
最简单的基于Flash的流媒体示例：网页播放器（HTTP，RTMP，HLS）
音视频领域,再次搜索,依然是大神雷霄骅的杰作.再次致敬,一路走好. ===================================================== Flash流媒体文章列表 ...
easyplayerpro 使用说明_H265网页播放器EasyPlayerPro-Win如何通过配置文件实现自动播放等功能？...
原标题:H265网页播放器EasyPlayerPro-Win如何通过配置文件实现自动播放等功能? 由于TSINGSEE青犀视频H265播放器EasyPlayer系列项目的开放性,关于EasyPlaye ...
H.265网页播放器EasyPlayer获取视频流正常，但是播放出现黑屏是什么原因？
EasyPlayer是可支持H.264/H.265视频播放的流媒体播放器,性能稳定.播放流畅,可支持的视频流格式有RTSP.RTMP.HLS.FLV.WebRTC等,具备较高的可用性.为了满足用户在不 ...
H.265网页播放器EasyPlayer实现WebRTC视频实时录像功能
我们在此前的文章中给大家分享过关于EasyPlayer已经实现了实时录像的功能,感兴趣的用户可以戳这篇文章:H5网页播放器EasyPlayer.js如何实现直播视频实时录像? 经过我们不断地摸索和研发 ...
挑选几款开源的、优秀的H.265网页播放器，进行特征整理及使用评价
H265和H264都是视频编码规范,H265是新一代视频编码规范,与H264相比压缩比更高,同样的码率下视频质量更高,或者说同样质量的视频占用的带宽和存储更少.之前由于终端支持有限,h265的推广使用 ...
html5的在线播放页面,整理5款html5网页播放器，总有一款适合你吧
整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...
jw player flash网页播放器参数说明以及应用配置
jw player flash网页播放器参数说明以及应用配置 1.参数解释这些参数可以配置被嵌入到html中的播放器的行为和外观.如果使用swfobject.js,可以用addVariable() ...
解决Chrome浏览器打开虾米音乐网页播放器时的排版问题
2019独角兽企业重金招聘Python工程师标准>>> 几年了,虾米音乐网页播放器听音乐都有个纠结的地方,就是用Chrome浏览器打开时,排版会出错,表现为播放器右边一部分显示不出来 ...

hls网页播放器实现

hls网页播放器实现

1. 文件引入

2. 模态框设置

3. js函数

hls网页播放器实现相关推荐

最新文章

热门文章