比较好的网页视频播放器总结

最新推荐文章于 2024-09-23 15:39:56 发布

Noreasth

最新推荐文章于 2024-09-23 15:39:56 发布

阅读量9.7k

点赞数 1

分类专栏： web 文章标签：浏览器 chrome firefox 视频

本文链接：https://blog.csdn.net/noreasth/article/details/17588939

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文对比了Video.js、Ckplayer及Jwplayer三款网页视频播放器的特点与使用体验。Video.js支持多种格式，但在IE下的兼容性较差；Ckplayer支持主流格式，但在部分浏览器下存在中文路径问题；Jwplayer不仅支持多种格式，而且较好地解决了中文路径问题。

摘要由CSDN通过智能技术生成

最近尝试了几个网页视频播放器，主要有Video.js，Ckplayer，Jwplayer。这三款使用简单，提高大量的JavaScript函数API，容易操控。

Video JS是一个基于JavaScript的HTML5视频播放器，当浏览器不支持时自动切换成Flowplayer播放器。支持H.264、Theora OGG和Google WebM格式。它没有依赖任何JavaScript框架，支持全屏播放和音量控制。外观皮肤完全采用CSS控制，没有用到任何图片。

然而在使用过程中并没有像官方说的那么好，在IE 8以下的浏览器都不能正常播放，使用IE 8访问其官方网站的示例视频都存在问题。但video.js有很明显的优点就是API使用非常简单，播放器的外观非常漂亮，并且可以修改CSS定制。在使用过程中发现其在IE下无法播放url中含有中文的视频。使用JavaScript进行URL编码后仍然不能解决，同时这款播放器对flv，fv4等流媒体格式支持非常不好，经常会出现问题。

Ck player是国产的一款视频播放器，支持流行视频格式flv，f4v，mp4，支持html5格式m3u8,webm,ogg theora,mp4。主流的格式都支持了，这点做的非常好，使用也极其简单，官网上有详细的说明，并且都是中文的介绍。在使用过程中发现其也存在不支持中文路径问题，在chrome下完美支持，但是在IE 10和Firefox下无法加载视频，IE11没有这个问题。通过查看网络请求发现Firefox将含有中文URL用Gb2312的编码方式进行编码了，这种编码方式Apache无法识别，也就不能正常获取视频。这个问题可能基于浏览器有关又和服务器有关。我按照网上能查到的所有方法试过了，包括对url进行utf8编码，在Apache配置文件中增加支持gb2312，仍然没有解决这个问题。因为自己水平也比较菜，所以就放弃了这个播放器。

Jw player是一个开源的在网页上使用的Flash视频、音频以及图片播放器，支持 Sliverlight 播放，可以通过一个XML文件使播放器自动切换显示一组图片，并播放背景音乐。它支持播放的Adobe Flash Player和HTML5浏览器可以处理任何格式（FLV文件，H.264标准，MP4功能，VP8的，WEBM，支持MP3，AAC，JPG，PNG和GIF）。使用同样很简单，官网上也有详细的例子，不过下载需要进行邮箱注册，不想麻烦的可以从这里下载http://download.csdn.net/detail/noreasth/6773771.同时jw支持URL含有中文字符，只要将其进行utf8编码即可.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jwplayer/jwplayer.js"></script>
<title></title>
</head>
<body>
	<div id="myElement">Loading the player ...</div>
	<script type="text/javascript">
		jwplayer("myElement").setup({
			flashplayer: "./jwplayer/player.swf",
			file: "Example.mp4",
			height: 360, 	
			width: 640
		});
	</script>
</body>
</html>