vvcomponent
Version:
VV组件
80 lines (76 loc) • 2.76 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<title>VideoPlayer</title>
<style>
body {
margin: 0;
}
#player {
border: 1px solid #333;
}
</style>
<script src="/class/Slider.js"></script>
<script src="/class/VideoPlayer.js"></script>
</head>
<body>
<h1>VideoPlayer</h1>
<button onclick="javascript:player.play();">播放</button>
<button onclick="javascript:player.pause();">暂停</button>
<!-- <iftc-video id="player" src="https://static.codemao.cn/coco/course/lesson1.mp4"></iftc-video> -->
<iftc-video id="player" src="Video.mp4"></iftc-video>
<script>
const player = document.getElementById("player");
player.addEventListener("play", e => {
console.log("视频播放", e);
});
player.addEventListener("pause", e => {
console.log("视频暂停", e);
});
player.addEventListener("ended", e => {
console.log("视频结束", e);
});
player.addEventListener("loadedmetadata", e => {
console.log("视频完成加载", e);
})
player.addEventListener("canplay", e => {
console.log("视频可以播放", e)
})
player.addEventListener("timeupdate", e => {
console.log("视频时间更新", e);
});
player.addEventListener("error", e => {
console.log("视频错误", e);
});
player.addEventListener("loadeddata", e => {
console.log("视频数据加载完成", e);
});
player.addEventListener("waiting", e => {
console.log("视频等待", e);
});
// videoPlayer.on("suspend", e => {
// console.log("suspend", e)
// })
// videoPlayer.getSize((width, height) => {
// console.log('视频宽度：' + width + '，视频高度：' + height);
// addEventListener("resize", e => {
// const scale = innerWidth / width
// player.style.height = height * scale + "px"
// player.style.width = width * scale + "px"
// })
// const scale = innerWidth / width
// player.style.height = height * scale + "px"
// player.style.width = width * scale + "px"
// })
// videoPlayer.on("cover", dataURL => {
// console.log("封面", dataURL)
// })
// onerror = e => {
// console.log(e)
// }
</script>
</body>
</html>