web网页播放器使用总结

来源：互联网发布：政府用什么数据库编辑：程序博客网时间：2024/05/22 17:36

近几年，网络直播比较火，各大互联网巨头都在各自的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一定要对应，网易播放器如果两者不对应，会直接报错。

0 0