Hbuilder-视频播放

太过爱你忘了你带给我的痛 2022-09-13 15:28 219阅读 0赞

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bGB5a2p5aSn5biFLeadqOWwkeW5sw_size_20_color_FFFFFF_t_70_g_se_x_16][]

<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>

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bGB5a2p5aSn5biFLeadqOWwkeW5sw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/51c226113d8146a791a7b30872d0b329.png