web网页播放器使用总结

近几年，网络直播比较火，各大互联网巨头都在各自的app中推出了直播频道，比如网易、腾讯等。我们公司也顺应潮流，最近开发了自己的直播项目。下面跟大家分享下我使用web播放器的经历。

一.网易web播放器

一开始我们选定使用网易直播云，顺利成章的我就使用网易的播放器，网易官方提供的播放器使用简单，文档规范，api也比较齐全，开发起来还是很顺利的，但是后来公司决定改用七牛的平台。那么我的问题就来了，播放器能否兼容是个问题，对于坑爹的网易，七牛的拉流虽然大部分可以播放，但是我测试时还是有一个线路播放不了，没办法，只能换播放器了。不过可以理解，公司的自我保护措施嘛。

二.其它开源播放器

七牛官网上推荐了两款开源播放器，mediajs和mediaelement。链接地址：直播相关的html5网页端播放器。说实话，这两款播放器个人感觉不怎么美观，但是没有找到更好的，只能在这两个中间选一个了。

对于mediajs这个播放器，我用七牛的一个回播地址测试，播放不了，demo地址：mediajs播放器bug。而mediaelementplayer可以正常播放，所以我就选择了mediaelementplayer。

1.mediaelementplayer播放器使用方法

详细使用方法请参照官网：官网。

使用demo请点击：demo。

下面简要说下实际使用方法。

首先当然是在head标签中引入csss文件：

<link href="../resource/css/lib/mediaelement/mediaelementplayer.min.css" rel="stylesheet">

然后在<body>标签的最底部引入js文件：

<script src="../resource/js/lib/mediaelement/mediaelement-and-player.min.js"></script>

video标签的初始化如下：

<video id="video-player" width="100%" height="200" controls="controls" preload="auto"><source type="application/x-mpegURL" src="http://foodsound.qiniudn.com/video/hls/introducing_thinglist_240.m3u8"> <!--必须写src属性，否则播放器初始化异常--></video>

对播放器初始化的js代码如下：

var videoUrl = null;if (status == 1) {                  // 未开始videoUrl = null;$(".video-poster").show();}else if (status == 2) {         // 正在直播videoUrl = liveStudio.liveStudioLines[0].playHls;new MediaElementPlayer("#video-player", {success: function (mediaElement, originalNode) {videoPlayer = mediaElement;videoPlayer.setSrc(videoUrl);}});}else if (status == 3) {         // 已经结束videoUrl = liveStudio.liveStudioLines[0].playback;var type = "application/x-mpegURL";if (videoUrl.indexOf(".mp4") > 0) {type = "video/mp4";}$("#video-player source").attr('type', type);$("#video-player source").attr('src', videoUrl);    // 更换type时必须同时更换src，否则播放器初始化不正常new MediaElementPlayer("#video-player", {success: function (mediaElement, originalNode) {videoPlayer = mediaElement;videoPlayer.setSrc(videoUrl);}});}

如果直播有多个线路需要切换时，js代码如下：

$(".choose-line").on('click', '.choose-line-btn', function () {$(".choose-line").find('li.line-selected').removeClass('line-selected');$(this).addClass('line-selected');var status = liveStudio.status;var liveStudioLines = liveStudio.liveStudioLines;if (status == 2) {var sourceUrl = liveStudioLines[parseInt($(this).find('.line-number').text() - 1)].playHls;}else if (status == 3) {sourceUrl = liveStudioLines[parseInt($(this).find('.line-number').text() - 1)].playback;}videoPlayer.pause();videoPlayer.setSrc(sourceUrl);videoPlayer.play();});

2.mediaelementplyaer初始化时必须给定src属性值

在调试过程中，我发现如果不给<video>标签中的src赋值，即使在dom加载完后，在js代码中给video的src赋值，播放器不能正常播放。但是如果给定src值，dom加载完后，即使js未对播放器初始化，播放器也会播放默认src地址的视频，这样在直播未开始的状态下，显然是不合理的。

对于这个问题，我在播放器上方叠加了一张图片，在直播未开始时，这张图片显示出来，用户点击不了播放按钮，就避免了这个问题。

3.mediaelementplayer播放hls格式视频不能全屏

mediaelementplyaer播放hls格式视频不能全屏，播放mp4和rtmp的正常，七牛上提供的demo也有这个问题，这是一个bug了，但是目前还没找到解决的办法。

4.type与src要匹配

对于web播放器，type与src一定要对应，网易播放器如果两者不对应，会直接报错。

web网页播放器使用总结相关推荐

Web点播播放器1.0——腾讯sdk网页点播播放器
https://www.qcloud.com/document/product/267/5706 功能介绍本文档是介绍腾讯云视频点播服务的网页播放器(Web SDK)的使用说明,它可帮助腾讯云客户直 ...
最简单的基于Flash的流媒体示例网页播放器（HTTP，RTMP，HLS）
===================================================== Flash流媒体文章列表: 最简单的基于Flash的流媒体示例:RTMP推送和接收(Acti ...
最简单的基于Flash的流媒体示例：网页播放器（HTTP，RTMP，HLS）
音视频领域,再次搜索,依然是大神雷霄骅的杰作.再次致敬,一路走好. ===================================================== Flash流媒体文章列表 ...
展示一下基于flask框架的网页播放器的代码
<p>下面是基于Flask框架的网页播放器的代码:from flask import Flaskapp = Flask(<strong>name</strong>) ...
免费轻量级网页播放器f4player, flv, f4v, mp4, stream, live stream, subscribed CDN
免费轻量级网页播放器f4player, flv, f4v, mp4, stream, live stream, subscribed CDN 博客分类: Javascript /Jquery / Bo ...
php在线点播,php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)...
在web开发中经常会碰到一些简单的视频播放功能,但现在的视频格式不同,并且可以动态增加,所以我们就必须把视频保存到数据哦,好了下面我们来看我写的段简单的php视频网页播放器代码吧. include ' ...
php 在线调用音乐播放器,宅音乐播放器,HTML5网页播放器，带后台管理及API调用，使用thinkphp编写...
宅音乐播放器宅音乐播放器,HTML5网页播放器,集成后台管理及API调用,目前正在开发中,敬请关注技术栈后端:thinkphp 5.1 前端:layui 数据库:mysql 演示整合依赖安装包 ...
挑选几款开源的、优秀的H.265网页播放器，进行特征整理及使用评价
H265和H264都是视频编码规范,H265是新一代视频编码规范,与H264相比压缩比更高,同样的码率下视频质量更高,或者说同样质量的视频占用的带宽和存储更少.之前由于终端支持有限,h265的推广使用 ...
开源ckplayer 网页播放器，跨平台 html5 mobile ，flv f4v mp4 rtmp协议
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 开源ck ...

web网页播放器使用总结

web网页播放器使用总结相关推荐

最新文章

热门文章