| :autoplay="false" | :autoplay="false" | ||||
| :height="dataList.length < 5 ? '494px' : '238px'" | :height="dataList.length < 5 ? '494px' : '238px'" | ||||
| > | > | ||||
| <el-carousel-item> | |||||
| <img :src="formatImg(JSON.parse(parkInfo.photo)[0])" alt="园区图片" /> | |||||
| </el-carousel-item> | |||||
| <el-carousel-item v-if="this.parkInfo.video"> | |||||
| <el-carousel-item v-if="this.parkInfo.video && this.parkInfo.video.length > 0"> | |||||
| <video-player | <video-player | ||||
| class="video-player vjs-custom-skin" | class="video-player vjs-custom-skin" | ||||
| ref="videoPlayer" | ref="videoPlayer" | ||||
| :options="playerOptions" | :options="playerOptions" | ||||
| ></video-player> | ></video-player> | ||||
| </el-carousel-item> | </el-carousel-item> | ||||
| <el-carousel-item v-for="(item, index) in parkInfo.photo" :key="index"> | |||||
| <img :src="formatImg(item)" alt="园区图片" /> | |||||
| </el-carousel-item> | |||||
| </el-carousel> | </el-carousel> | ||||
| </div> | </div> | ||||
| fluid: false, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。 | fluid: false, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。 | ||||
| sources: [ | sources: [ | ||||
| { | { | ||||
| type: "video/" + JSON.parse(this.parkInfo.video)[0].split(".")[1], // 资源格式写法:'video/mp4',否则控制台会出现notSupportedMessage设置的错误。 | |||||
| src: this.formatVideo(JSON.parse(this.parkInfo.video)[0]), // 视频url地址 | |||||
| type: "video/" + this.parkInfo.video[0].split(".")[1], // 资源格式写法:'video/mp4',否则控制台会出现notSupportedMessage设置的错误。 | |||||
| src: this.formatVideo(this.parkInfo.video[0]), // 视频url地址 | |||||
| }, | }, | ||||
| ], | ], | ||||
| poster: "", // 视频封面地址 | |||||
| poster: this.formatImg(this.parkInfo.photo[0]), // 视频封面地址 | |||||
| // width: document.documentElement.clientWidth, | // width: document.documentElement.clientWidth, | ||||
| height: this.dataList.length < 5 ? 494 : 238, // 设置高度,fluid需要设置成false | height: this.dataList.length < 5 ? 494 : 238, // 设置高度,fluid需要设置成false | ||||
| notSupportedMessage: "此视频暂无法播放...", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 | notSupportedMessage: "此视频暂无法播放...", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。 |