<template>
|
<div>
|
<el-card>
|
<template #header>
|
<span>视频播放</span>
|
</template>
|
<video ref="videoPlayer" width="100%" controls>
|
<source :src="videoUrl" type="video/mp4">
|
您的浏览器不支持视频播放。
|
</video>
|
<el-row>
|
<el-col :span="12">
|
<el-button @click="playVideo">播放</el-button>
|
<el-button @click="pauseVideo">暂停</el-button>
|
</el-col>
|
<el-col :span="12">
|
<el-input v-model="videoUrl" placeholder="请输入视频地址"></el-input>
|
<el-button @click="loadVideo">加载视频</el-button>
|
</el-col>
|
</el-row>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
videoUrl: 'https://media.w3.org/2010/05/sintel/trailer.mp4'
|
};
|
},
|
methods: {
|
playVideo() {
|
this.$refs.videoPlayer.play();
|
},
|
pauseVideo() {
|
this.$refs.videoPlayer.pause();
|
},
|
loadVideo() {
|
this.$refs.videoPlayer.load();
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
/* 这里可以添加自定义样式 */
|
</style>
|
|
