附件
示例代码下载地址：https://caiyun.139.com/m/i?135CmTDEgyhpP
前情提示
视频直播场景；
历史视频录播场景；
列表显示点击弹窗展示视频；
快速接入
- 引入组件
import VideoAli from '@/components/Video/VideoAli'
components: {
VideoAli,
},
<video-ali
ref='videoAli'
/>- 点击事件弹窗
<a @click="$refs.videoAli.showDetail(record.name)" style="color: rgba(0, 0, 0, 0.65);font-size: 12px;-webkit-text-size-adjust: none;">
<a-icon type="play-circle" />
<span style="font-size: 12px;-webkit-text-size-adjust: none;">视频</span>
</a>- 至此完成！
截图
组件代码
<template>
<j-modal
ref="createModal"
:maskClosable="false"
centered
:title="formTitle"
width="60%"
:visible="open"
:fullscreen.sync="modal.fullscreen"
:switchFullscreen="modal.switchFullscreen"
:confirmLoading="submitLoading"
:bodyStyle="{ padding: '16px 0', height: '100%' }"
:footer="null"
@cancel="cancel"
cancelText="关闭">
<a-spin :spinning="videoLoading">
<a-card :bordered="false">
<div class="prism-player" id="player-con"></div>
<div class="prism-player" ref="playerTemp">
</div>
<p v-if="!sourceList">
{{ noData}}
</p>
</a-card>
</a-spin>
</j-modal>
</template>
<script>
import {videoList} from './js/testVideoList'
export default {
name: 'VideoAli',
props: {
isLive: {
type: Boolean,
required: false,
default: true,
},
autoplay: {
type: Boolean,
required: false,
default: true,
},
sourceList: {
type: [String, Array, Object],
required: false,
default: null
},
},
components: {
},
data () {
return {
open: false,
loading: false,
submitLoading: false,
modal: {
fullscreen: false,
switchFullscreen: true
},
formTitle: '',
noData: null,
videoList: videoList,
localSourceList: this.sourceList,
player: null,
playingVideo: {},
loadingColor: ['#276cb3', '#f2ac1a', '#28130e', '#229849', '#db2344'],
videoLoading: false,
fullScreen: false,
}
},
filters: {
},
created () {
},
mounted () {
},
computed: {
localIsLive() {
if (this.localSourceList && this.localSourceList.indexOf('.mp4') > -1) {
return false
}
return this.isLive
}
},
watch: {
},
methods: {
showDetail (row) {
this.open = true
this.$nextTick(() => {
const poster = null
this.localSourceList = row
if (this.localSourceList && this.localSourceList.indexOf('http') > -1) {
this.createDemoPlayer(this.localSourceList, poster)
} else {
this.noData = '暂无视频 或 视频源错误'
}
this.videoLoading = false
})
},
onClose () {
this.open = false
},
cancel () {
this.open = false
},
checkSourceListType() {
const sourceList = this.sourceList
if (typeof sourceList === 'string') {
console.log('sourceList 是一个字符串')
} else if (Array.isArray(sourceList)) {
console.log('sourceList 是一个数组')
} else if (typeof sourceList === 'object' && sourceList !== null) {
console.log('sourceList 是一个对象')
} else {
console.log('sourceList 的类型未知或未定义')
}
},
playVideo(video) {
if (this.player === null || this.playingVideo.VideoId === video.VideoId) {
return
}
this.player.loadByUrl(video.source)
this.playingVideo = video
},
createDemoPlayer(source, cover) {
if (document.getElementById('player-con') === null) {
const playerDomWrap = this.$refs.playerTemp
const playerDom = document.createElement('div')
playerDom.setAttribute('id', 'player-con')
playerDomWrap.appendChild(playerDom)
}
const props = {
id: 'player-con',
width: '100%',
// 设置高度
height: '485px',
language: 'zh-cn',
source: source,
isLive: this.localIsLive,
cover: cover ? cover : null,
'autoplay': this.autoplay,
'preload': true,
'rePlay': false,
'playsinline': true,
'keyShortCuts': true,
'controlBarVisibility': 'hover',
'useH5Prism': true,
'extraInfo': {
'crossOrigin': 'anonymous'
},
components: [{
name: 'StartADComponent',
type: AliPlayerComponent.StartADComponent,
args: ['https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg', 'https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=pqofinu5', 2]
}, {
name: 'PauseADComponent',
type: AliPlayerComponent.PauseADComponent,
args: ['https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg', 'https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=pqofinu5l']
}],
snapshotWatermark:{
left:'100',
top:'100',
text:'Powered By PUSDN',
font:'italic bold 12px 宋体',
strokeColor:'gray',
fillColor:'gray'
},
'skinLayout': [
{
'name': 'bigPlayButton',
'align': 'cc'
},
{
'name': 'H5Loading',
'align': 'cc'
},
{
'name': 'errorDisplay',
'align': 'tlabs',
'x': 0,
'y': 0
},
{
'name': 'infoDisplay'
},
{
'name': 'tooltip',
'align': 'blabs',
'x': 0,
'y': 56
},
{
'name': 'thumbnail'
},
{
'name': 'controlBar',
'align': 'blabs',
'x': 0,
'y': 0,
'children': [
{
'name': 'liveDisplay',
'align': 'tlabs',
'x': 15,
'y': 6
},
{
'name': 'progress',
'align': 'blabs',
'x': 0,
'y': 44
},
{
'name': 'playButton',
'align': 'tl',
'x': 15,
'y': 12
},
{
'name': 'timeDisplay',
'align': 'tl',
'x': 10,
'y': 7
},
{
'name': 'fullScreenButton',
'align': 'tr',
'x': 10,
'y': 12
},
// {
// 'name': 'subtitle',
// 'align': 'tr',
// 'x': 15,
// 'y': 12
// },
{
'name': 'setting',
'align': 'tr',
'x': 15,
'y': 12
},
{
'name': 'volume',
'align': 'tr',
'x': 5,
'y': 10
},
{
'name': 'snapshot',
'align': 'tr',
'x': 10,
'y': 9
}
]
}
]
}
this.player = new Aliplayer(props, (player) => {
player.on('snapshoted', (data) => {
this.handleSnapshot(data)
})
})
let clicked = false
this.player.tag.addEventListener('click', ()=>{
console.log(this.player.getStatus())
if (!clicked) {
setTimeout(() => {
if (!clicked) {
console.log(this.player.getStatus())
if (this.player.getStatus() === 'pause') {
this.player.play()
} else {
this.player.pause()
}
}
clicked = false // 重置状态
}, 300) // 设置一个合适的时间间隔
}
})
this.player.tag.addEventListener('dblclick', ()=>{
clicked = true // 表示已经发生了双击事件
const service = this.player.fullscreenService
if(service.getIsFullScreen())
{
service.cancelFullScreen()
} else {
service.requestFullScreen()
}
})
},
playNextVideo() {
const videoList = this.videoList
const index = videoList.findIndex(item => item.VideoId === this.playingVideo.VideoId)
if (index === -1 || index === videoList.length - 1) {
// this.player.getComponent('playerTipComponent').fadeOutTip()
return
}
this.playVideo(videoList[index + 1])
},
fullScreenHandle() {
const title = this.playingVideo.Title
this.player.getComponent('playerFullScreenTitle').fullScreenHandle(title)
this.fullScreen = true
},
cancelFullScreenHandel() {
this.fullScreen = false
},
handleSnapshot2 (data) {
var canvas = document.createElement('canvas'),
video = this.player.tag
canvas.width =video.videoWidth,//视频原有尺寸
canvas.height = video.videoHeight//视频原有尺寸
var ctx = canvas.getContext('2d')
ctx.save()
var image = this.player.getImage()
if(image == 'vertical')//垂直镜像
{
ctx.translate(0,canvas.height)
ctx.scale(1, -1)
}
else if(image == 'horizon')//水平镜像
{
ctx.translate(canvas.width, 0)
ctx.scale(-1, 1)
}
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
ctx.restore()
},
handleSnapshot(data) {
// console.log('截图完成', data)
var pictureData = data.paramData.base64
var downloadElement = document.createElement('a')
downloadElement.setAttribute('href', pictureData)
var fileName = 'Pusdn_' + Date.now() + '.png'
downloadElement.setAttribute('download', fileName)
downloadElement.click()
pictureData = null
},
}
}
</script>
<style lang='less' scoped>
/deep/ .ant-modal-header{
display: none;
}
</style>
