<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>super video</title>
<style>
html,body {
width: 100%;
height: 100%;
background-color: #292929;
}
* {
padding: 0;
margin: 0;
}
#videoContainer {
width: 800px;
height: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
</style>
<link href="./lib/css/main-css.css" rel="stylesheet"></head>
<body>
<noscript>
<strong>We're sorry but soucecode doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="videoContainer"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="./lib/superVideo.js"></script></body>
<script>
const nextControl = new Super.NextControl() // 实例化“下一个”按钮控件
const Dbspeen = new Super.Dbspeen() // 倍速控件
const fullScreenControl = new Super.FullScreenControl() // 实例化“全屏”控件
const video = new Super.Svideo('videoContainer', {
source: new Super.VideoSource({ // 引入视频资源
src: 'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Bastion_TheLastBastion.mp4'
}),
leftControls: [nextControl], // 控件栏左槽插入控件
rightControls: [Dbspeen, fullScreenControl] // 控件栏右槽插入控件
})
video.addEventListener('change', (event) => { // 监听video各属性变化
// console.log(event)
})
nextControl.addEventListener('click', () => { // 监听“下一个”按钮控件点击事件
alert('click next menu !!!')
})
fullScreenControl.addEventListener('fullscreen', () => { // 监听进入全屏
console.log('is fullscreen !!!')
})
fullScreenControl.addEventListener('cancelfullscreen', () => { // 监听退出全屏
console.log('cancel fullscreen !!!')
})
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>更多源码<a href="http://www.96flw.com" target="_blank">www.96flw.com</a></p>
</div>
</html>
