67 lines
2.3 KiB
HTML
67 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title></title>
|
||
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1980004_lnqny5kta9g.css">
|
||
<style>
|
||
.vip_join {
|
||
color: #61bd12;
|
||
}
|
||
</style>
|
||
<link href="AVideo.min.css" rel="stylesheet">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="app"></div>
|
||
<script src="AVideo.min.js"></script>
|
||
|
||
</body>
|
||
|
||
<script>
|
||
// 阿里云视频 https://player.alicdn.com/video/editor.mp4
|
||
// 七牛云视频 http://demo-videos.qnsdk.com/movies/qiniu.mp4
|
||
// m3u8 地址 http://video.geekhelp.cn/vue33
|
||
new AVideo({
|
||
el: '#app',
|
||
// url: 'http://video.geekhelp.cn/vue33',
|
||
url: [
|
||
{ title: '高清', url: '1.mp4' },
|
||
{ title: '标清', url: '2.mp4' },
|
||
{ title: '低清', url: '3.mp4' },
|
||
],
|
||
title: '测试传入视频播放标题',
|
||
width: '60%', // 播放器高度
|
||
height: '600px', // 播放器宽度
|
||
autoplay: false, // 是否开启自动播放
|
||
muted: false, // 是否静音 true 静音，false 不静音
|
||
// 需要什么控件就把对应的值设为 true，不需要就false或者不填key
|
||
controls: {
|
||
speed: true, // 倍速播放
|
||
rotate: true, // 需要视频旋转按钮
|
||
image: true, // 需要视频镜像按钮
|
||
play: true, // 需要视频播放按钮
|
||
loop: true, // 需要视频循环播放按钮
|
||
PictureInPicture: true, // 需要视频的画中画功能
|
||
ScreenShot: true, // 是否需要截图按钮
|
||
},
|
||
finish: (video) => {
|
||
console.log("视频播放完成：", video)
|
||
},
|
||
// 播放列表
|
||
playList: [
|
||
{ title: '传入视频播放列表测试1', url: '1.mp4' },
|
||
{ title: '传入视频播放列表测试2', url: '2.mp4' },
|
||
{ title: '传入视频播放列表测试3', url: '3.mp4' },
|
||
{ title: '传入视频播放列表测试4', url: '4.mp4' },
|
||
{ title: '传入视频播放列表测试5', url: '5.mp4' },
|
||
],
|
||
// 预览图地址
|
||
poster: 'http://5b0988e595225.cdn.sohucs.com/images/20190705/52ea928741394f959974ec4e34860bcf.jpeg'
|
||
});
|
||
</script>
|
||
|
||
</html> |