프런트 엔드 Vue 맞춤형 회전식 비디오 재생 구성 요소는 Jingdong 제품 세부 정보 회전식 비디오 비디오 재생을 모방하고 사진을 미리 볼 수 있습니다.전체 코드를 다운로드하려면 uni-app 플러그인 시장 주소를 방문하십시오: https://ext.dcloud. net.cn/플러그인 ?id=13325
렌더링은 다음과 같습니다.
# cc-videoSwiper
#### 지침
```사용 방법
<!-- goodsData: 캐러셀 동영상 데이터 @setShowVideo: 동영상 버튼 클릭 이벤트 -->
<cc-videoSwiper :goodsData="goodsData" @setShowVideo="setShowVideo"></cc-videoSwiper>
```
#### HTML 코드 구현 부분
```html
<템플릿>
<뷰 클래스="콘텐츠">
<!-- goodsData: 캐러셀 동영상 데이터 @setShowVideo: 동영상 버튼 클릭 이벤트 -->
<cc-videoSwiper :goodsData="goodsData" @setShowVideo="setShowVideo"></cc-videoSwiper>
<!-- 동영상 미리보기 팝업창 -->
<view class="mask" v-if="showVideo == true" @touchmove.stop.prevent="ondefault" @click="hideShow">
<뷰 클래스="닫기">
<image src="/static/images/goods/close.png"></image>
</뷰>
</뷰>
<view class="previewvideo" v-if="showVideo == true">
<뷰 클래스="동영상">
<video class="nowvideos" id="nowVideo" v-if="showVideo == true" :src="goodsData.videos"
:autoplay="showVideo" :show-center-play-btn="참" :show-mute-btn="참"
:show-fullscreen-btn="false"></video>
</뷰>
</뷰>
<!-- H5 미리보기 비디오를 운반하는 데 사용됨 -->
<뷰 스타일="위치: 절대;상단: -999upx;왼쪽: -999upx;">
<video ref="newVideo" id="newVideo" :src="goodsData.videos" :autoplay="showVideo"
:show-center-play-btn="거짓" :show-mute-btn="참" :show-fullscreen-btn="거짓"
@fullscreenchange="hideShow"></video>
</뷰>
</뷰>
</템플릿>
<스크립트>
기본값 내보내기 {
데이터() {
반품 {
상품 데이터: {
동영상: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
imgList: [
"https://cdn.pixabay.com/photo/2016/08/11/23/48/mountains-1587287_1280.jpg",
'https://cdn.pixabay.com/photo/2016/11/14/04/45/elephant-1822636_1280.jpg',
'https://cdn.pixabay.com/photo/2018/08/12/15/29/hintersee-3601004_1280.jpg',
'https://cdn.pixabay.com/photo/2017/05/09/03/46/alberta-2297204_1280.jpg'
],
},
showVideo: 거짓,
새 동영상: null
}
},
길 위에() {
this.newVideo = uni.createVideoContext('newVideo');
},
방법: {
//작업 비디오
setShowVideo(showVideo, isH5) {
this.showVideo = showVideo
if (isH5 == 참) {
this.newVideo.play()
}
console.log('동영상 클릭 재생');
},
// 비디오 닫기
숨김 표시() {
this.showVideo = 거짓
},
}
}
</스크립트>
<style lang="scss" 범위>
.콘텐츠 {
디스플레이: 플렉스;
플렉스 방향: 열;
}
/* 미리보기 영상 팝업창 */
.마스크 {
폭: 100%;
높이: 100vh;
위치: 고정;
상단: 0;
왼쪽: 0;
배경색: rgba(0, 0, 0, .8);
Z-지수: 200;
}
.previewvideo {
폭: 100vw;
높이: 100vw;
위치: 고정;
상단: 50%;
왼쪽: 0;
변환: translateY(-50%);
배경색: #000;
Z-지수: 900;
불투명도: 1;
}
.닫다 {
디스플레이: 플렉스;
정렬 내용: 중앙;
항목 정렬: 플렉스 엔드;
위치: 절대;
상단: 140upx;
오른쪽: 20upx;
Z-지수: 900;
이미지 {
폭: 50upx;
높이: 50upx;
디스플레이: 블록;
justify-content: 센터;
여백-왼쪽: 30upx;
마진 바닥: 20upx;
경계 반경: 50%;
패딩: 10upx;
배경색: rgba(0, 0, 0, 0.2);
}
}
.동영상 {
높이: 100vw;
폭: 100vw;
Z-지수: 10;
위치: 상대적;
동영상 {
폭: 100%;
높이: 100%;
}
}
.nowvideos {
폭: 100%;
높이: 100%;
여백: 0 자동;
}
</스타일>
```