html 跨平台开源多媒体播放器 Sewise Player 基本使用说明与使用问题(兼容ie)

Sewise Player是一款专业的免费网页视频、流播放器,它功能强大,体积小,跨平台,使用方便简洁、随心所欲。 播放器是主要以HTML5技术为平台开发,同时兼容flash技术,实现了跨平台各浏览器兼容的视频播放。使用Sewise Player您可以在Windows, MacOS, Linux,Windows Phone, Android, IOS等任意平台上,通过对应的浏览器播放视频。 Sewise Player使用非常简单,只要在页面对应的DIV内嵌入一个JS文件即可,播放器将通过自动识别浏览器的功能来启用HTML5或flash模式播放视频。你不需要掌握任何专业的JavaScript或ActionScript技术就可以制作出专业的网页视频播放器。 Sewise Player即可以做为单一的前台播放器来在页面上播放视频,也可以结合Sewise Server后台技术实现专业的可交互的点播、直播视频播放。

官网地址 http://player.sewise.com

这一款html5跨平台多媒体播放器功能还是很不错的。。而且很简单易用,可以播放视频与音频等多媒体文件,下面介绍使用.
官网在线演示文档 http://jackzhang1204.github.io/sewise/sewise_player/demos/examples.html


1.获取Sewise Player 支持,下面是其官网上提供的github上的zip包下载地址,若失效,请去官网寻找最新获取路径。
https://github.com/sewise/sewise-player/archive/master.zip

2.将zip爆解压后,复制player文件夹导入进你的项目,文件夹结构建议不要破环!

3.将player下的sewise.player.min.js引入到你的html页面。

4.演示界面代码

<!DOCTYPE html>
<html lang="en">
<head>
<span style="white-space:pre">	</span><meta charset="utf-8" />
<span style="white-space:pre">	</span><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<span style="white-space:pre">	</span><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<span style="white-space:pre">	</span><title>Sewise Player</title>
<span style="white-space:pre">	</span><script type="text/javascript" src="../player/sewise.player.min.js"></script>
<span style="white-space:pre">	</span><style type="text/css">
<span style="white-space:pre">		</span>body{
<span style="white-space:pre">			</span>margin:0;
<span style="white-space:pre">			</span>padding:0;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span></style>
</head>
<body>
<span style="white-space:pre">	</span><div style="width: 640px; height: 352px;">
<span style="white-space:pre">		</span><div id="container" style="width: 640px; height: 360px; ">
<span style="white-space:pre">			</span><script type="text/javascript">
<span style="white-space:pre">				</span>SewisePlayer.setup({
<span style="white-space:pre">					</span>server: "vod",
<span style="white-space:pre">					</span>type: "flv",
<span style="white-space:pre">					</span>videourl: parent.playUrl,
<span style="white-space:pre">					</span>//videourl: "http://58.213.133.146:802/resources//2015/228/upload_b92b3071529bcd91ffe62f2248f1271f.mp4",
<span style="white-space:pre">					</span>poster: "http://jackzhang1204.github.io/materials/poster.png",
<span style="white-space:pre">			</span>        skin: "vodWhite",
<span style="white-space:pre">			</span>        title: "Tile 标题",
<span style="white-space:pre">			</span>        lang: 'en_US',
<span style="white-space:pre">			</span>        claritybutton: 'disable'
<span style="white-space:pre">				</span>}, "container");
<span style="white-space:pre">			</span></script>
<span style="white-space:pre">		</span></div>
<span style="white-space:pre">	</span></div>
</body>
</html>

SewisePlayer.setup()是初始化方法,其他方法请参照官网api.

特别注意:导入sewise player项目后,需要在tomcat部署的环境下,比如localhost:8080/project_name,不能直接右击打开文件,以file/开头展示页面。


发布了10 篇原创文章 · 获赞 3 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/u012581020/article/details/44017957