<template>
<view>
<video class="video" :src="src"
autoplay="true" loop="true" enable-danmu="true" danmu-btn="true" :danmu-list="danmuList">
</video>
<view class="title">视频集合{
{name}}
<view class="uni-list-cell" hover-class="uni-list-cell-hover"
v-for="(item,index) in tvList" :key="index" @tap="setUrl(item)" >
<view class="list-cell">
{
{item.name}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
danmuList: [],
src:'https://v-cdn.zjol.com.cn/280443.mp4',
name:'',
tvList: [
{id:'1',name: '第1集',url:'https://v-cdn.zjol.com.cn/280443.mp4'},
{id:'1',name: '第2集',url:'https://v-cdn.zjol.com.cn/276982.mp4'},
{id:'1',name: '第3集',url:'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'},
{id:'1',name: '第4集',url:'http://vjs.zencdn.net/v/oceans.mp4 '},
{id:'1',name: '第5集',url:'http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4'},
]
}
},
methods: {
setUrl(row) {
debugger
console.log(">>>11>>>>>>>" + JSON.stringify(row))
let{src,name}=this.$data
src=row.url;
this.$data.src=row.url
this.$data.name=row.name
console.log(">>>22>>>>>>>" + this.$data.src)
},
}
}
</script>
<style lang="scss">
.video {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title {
color: #1CBBB4;
font-weight: normal;
margin-left: 30rpx;
margin-top: 10rpx;
}
.list-cell {
color: #1CBBB4;
float: left;
margin-left: 20rpx;
margin-top: 20rpx;
}
</style>
Hbuilder-视频播放
猜你喜欢
转载自blog.csdn.net/qq_31432773/article/details/131195365
今日推荐
周排行