mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-07 01:46:44 +08:00
80 lines
1.5 KiB
Vue
80 lines
1.5 KiB
Vue
<template>
|
|
<view>
|
|
<view v-if="show">
|
|
<video-player
|
|
:url="fileUrl"
|
|
:name="title"
|
|
:inittime="initTime"
|
|
:drag="true"
|
|
@play="videoPlay"
|
|
@pause="videoPause"
|
|
@timeupdate="videoPlaying"
|
|
@ended="videoEnd"
|
|
@fullscreenchange="videoScreen">
|
|
</video-player>
|
|
</view>
|
|
<view style="padding-top: 30px;display: flex;justify-content: center;">
|
|
<button type="default" @click="loadVideo()">加载</button>
|
|
<button type="primary" @click="changeSrc()">切换测试</button>
|
|
</view>
|
|
<view>
|
|
<video style="width: 100%;"
|
|
:src="fileUrl"
|
|
:controls="true"
|
|
@fullscreenchange="videoScreen"
|
|
></video>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return {
|
|
show:false,
|
|
fileUrl:'',
|
|
initTime:0,
|
|
title:'',
|
|
author:'',
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadVideo();
|
|
},
|
|
methods:{
|
|
loadVideo(){
|
|
//this.fileUrl='http://localhost:9090/cdn/upload/course/2022/5/979321410778959872.mp3';
|
|
this.fileUrl='/static/temp/test.mp4';
|
|
this.title='标题内容111';
|
|
this.initTime=40;
|
|
this.show=true;
|
|
},
|
|
changeSrc(){
|
|
this.fileUrl='/static/temp/video.mp4';
|
|
this.title='标题内容221';
|
|
this.initTime=20
|
|
},
|
|
videoPlay(){
|
|
console.log('videoPlay');
|
|
},
|
|
videoEnd(){
|
|
console.log('videoEnd');
|
|
},
|
|
videoPause(){
|
|
console.log('videoPause');
|
|
},
|
|
videoPlaying(){
|
|
console.log('videoPlaying');
|
|
},
|
|
videoScreen(e){
|
|
console.log('全屏',e);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.xaudio{
|
|
|
|
}
|
|
</style> |