A simple & pretty HTML5 video player

Posted on Updated on

ktPlayer

a simple HTML5 video player
一款基于HTML5的web视频播放器

使用方法

方式1：NPM

npm install ktPlayer

方式2：引入该项目下的dist文件夹

接下来

引入css文件：

<link rel="stylesheet" href="./dist/ktPlayer.min.css">

引入js文件：

<script src="./dist/ktPlayer.min.js"></script>

写入播放器容器DOM：(可选,如未配置默认将播放器插入到body最后一个子节点.)

<div id="container"></div>

创建KTPlayer对象,并初始化：

//原生环境
window.onload = function(){
	var player = new KTPlayer({
	    src:'http://oc8qda7cw.bkt.clouddn.com/mayjlee.mp4',//视频文件，必填
	    pic:'http://oc8qda7cw.bkt.clouddn.com/mayjlee.png',//视频截图，必填
	    //root:document.getElementById('container') 配置播放器插入位置，选填
	});
	player.init();
};
//jQuery环境
$(function(){
	var player = new KTPlayer({
	    src:'http://oc8qda7cw.bkt.clouddn.com/mayjlee.mp4',//视频文件，必填
	    pic:'http://oc8qda7cw.bkt.clouddn.com/mayjlee.png',//视频截图，必填
	    //root:$('#container').get(0) 配置播放器插入位置，选填
	});
	player.init();
});

致谢

https://github.com/wangpengfei15975/ktPlayer/

 

 

实例：

<div class=”block-video”>
<div class=”table”>
<div class=”opt” style=”display: none;”><a title=”Visit our sponsor” href=”http://1m734.com/?aff=991817″><img src=”https://ww2.sinaimg.cn/large/0060lm7Tly1fkhwfcmx8kg308r08hdyu.gif” /></a></div>
</div>
<div class=”video-holder”>
<div class=”player”>
<div class=”player-holder”>
<div class=”player-wrap” style=”width: 100%; height: 0; padding-bottom: 46.258503401361%;”>
<div id=”kt_player”></div>
</div>
<script type=”text/javascript” src=”/player/kt_player.js?v=3.9.0″></script>
<script type=”text/javascript”>
/* <![CDATA[ */
function getEmbed(width, height) {
if (width && height) {
return ‘<iframe width=”‘ + width + ‘” height=”‘ + height + ‘” src=”https://www.fcww7.com/embed/35213″ frameborder=”0″ allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>’;
}
return ‘<iframe width=”1080″ height=”1920″ src=”https://www.fcww7.com/embed/35213″ frameborder=”0″ allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>’;
}

var flashvars = {
video_id: ‘35213’, license_code: ‘$364245612017099’, lrc: ‘41256868’, video_url: ‘function/0/https://www.fcww7.com/get_file/1/f9/350/352/35213.mp4/’, video_url_hd: ‘1’, postfix: ‘.mp4’, video_url_text: ‘LQ’, video_alt_url: ‘https://www.fcww7.com/hd.php’, video_alt_url_text: ‘HD’, video_alt_url_redirect: ‘1’, video_alt_url_hd: ‘1’, preview_url: ‘https://www.fcww7.com/contents/videos/35000/35213/preview.mp4.jpg’, skin: ‘youtube.css’, bt: ‘3’, preload: ‘metadata’, hide_controlbar: ‘1’, hide_style: ‘fade’, mlogo: ‘点击观看更多’, mlogo_link: ‘http://1fcw.co’, adv_start_html: ‘https://www.fcww7.com/player/html.php?aid=start_html&video_id=35213&cs_id=0’, embed: ‘true’ };
kt_player(‘kt_player’, ‘https://www.fcww7.com/player/kt_player.swf?v=3.9.0’, ‘100%’, ‘100%’, flashvars);

/* ]]> */
</script>

</div>
</div>
</div>
</div>

kt_player

Posted in html5