<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>VOD Player Demo</title>
<meta name="description" content="VOD player demo">
<meta name="author" content="George Sun">
<link rel="stylesheet" href="fenixplayer.min.css?v=1.0">
<style>
* {
box-sizing: border-box;
}
body {
background: #2F3033;
}
.user-inputs {
position: relative;
margin: 16px 0;
width: 800px;
height: 40px;
}
#input-hls-url {
position: absolute;
width: 800px;
height: 40px;
border: none;
background: #212224;
color: #FFF;
padding-left: 10px;
padding-right: 100px;
}
#play-hls-video {
width: 80px;
height: 30px;
position: absolute;
top: 5px;
right: 10px;
border-radius: 4px;
background: #1989FA;
font-size: 16px;
border: none;
}
.video-wrapper {
display: flex;
align-items: center;
}
#demo-video {
background: #000;
}
.player-initial-size {
width: 800px;
height: 600px;
}
</style>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="user-inputs">
<!--<input id="input-hls-url" placeholder="输入 HLS URL" value="http://media-resource.com0.z0.glb.qiniucdn.com/七牛云存储视频－三周年.mp4?avvod/m3u8/s/960x640/vb/1000k">-->
<input id="input-hls-url" placeholder="输入 HLS URL" value="http://qn.res.aheading.com/o_1bssf4si215kucd6sds1rpq4lc9.mov?avvod/m3u8/s/960x640/vb/1000k">
<button id="play-hls-video">播放</button>
</div>
<div class="video-wrapper">
<video id="demo-video" class="video-js vjs-big-play-centered player-initial-size"></video>
</div>
<script src="zepto-1.2.0.min.js"></script>
<script src="fenixplayer.min.js"></script>
<script>
// Dispose video instance first
$(document).ready(function () {
$("#input-hls-url").keyup(function (event) {
if (event.keyCode == 13) {
$("#play-hls-video").click();
}
});
$("#demo-video").bind("loadedmetadata", function () {
window.videoWidth = this.videoWidth;
window.videoHeight = this.videoHeight;
$('#demo-video').removeClass('player-initial-size');
});
$("#play-hls-video").click(function (e) {
var source = $("#input-hls-url").val();
if (!source) {
alert("请指定 HLS 播放源。");
} else {
var player = new FenixPlayer('demo-video', {
engineOrder: ['html5'],
autoplay: false,
preload: "auto",
controls: true,
poster: 'https://player.qiniucc.com/qiniu-620x205.png',
width: window.videoWidth,
height: window.videoHeight,
file: source,
type: "hls"
});
player.play();
}
});
});
</script>
</body>
</html>
七牛云 实时转码demo
5星 · 超过95%的资源 需积分: 1 70 浏览量
2017-11-08
18:34:11
上传
评论 2
收藏 130KB RAR 举报 
qnyplayer.rar （4个子文件） 
qnyplayer 
fenixplayer.min.js 524KB
qnydemo.html 4KB zepto-1.2.0.min.js 26KB fenixplayer.min.css 41KB资源评论
JIADIANWEIXIOU2018-01-02下载看看 收藏
