H5轮播视频和图片

提示：视频和图片轮播实现原理都是一样的，这里给一个之前用过最舒服的搭配
van-swipe和vue-video-player基于vue.js

轮播插件基本前端组件里面都会有这个功能，所以对于图片轮播我们就不多说了，主要是想分享一下关于视频播放在轮播里面的一些应用和功能点。

视频轮播应用需求
1、不点击播放视频时，正常实现轮播功能
2、当点击播放视频（正在播放中），切换轮播关闭视频播放，再切换到视频页，视频继续接着播放
3、当点击播放视频，但是暂停了视频，正常切换轮播，回到视频页，不播放视频

实现功能
先理一下思路，其实就是轮播和视频播放之间的切换

1、引入
代码片.

<link rel="stylesheet" href="css/vant-index.css">
<link rel="stylesheet" href="css/video-js.min.css">

<script src="js/video.min.js">script>
<script src="js/vue.min.js">script>
<script src="js/vue-video-player.js">script>
<script src="js/vant.min.js">script>

<script type="text/javascript">
  Vue.use(window.VueVideoPlayer)//加载视频播放组件
script>

vue-video-plyaer.js下载
npm install vue-video-player --save

2、html
代码片.

<div id="app">
  <van-swipe class="my-swipe" indicator-color="#1989fa" :loop="false" :show-indicators="true" :height="swiper_new_media" @change="swiper_change">
  	
  	<van-swipe-item>
  		<video-player class="video-player vjs-custom-skin" :playsinline="true" :options="playerOptions" customEventName="customstatechangedeventname" @pause="onPlayPause()" @play="onPlayPlay()" @ended="onPlayEnded($event)">
  		video-player>
  	van-swipe-item>
  
  	
  	<van-swipe-item v-for="(item,index) in images">
  		<van-image :src="item">
  			<template v-slot:loading>
  				<van-loading type="spinner" size="20" />
  			template>
  		van-image>
  	van-swipe-item>
  	<template #indicator>
  		<div class="custom-indicator">
  			{{ currents + 1 }}/{{jiaobiao_number}}
  		div>
  	template>
  van-swipe>
div>

3、js
代码片.

var app = new Vue({
  	el: "#app",
  	data:{
  		playerOptions: {
  			//播放速度
  			playbackRates: [0.5, 1.0, 1.5, 2.0],
  			//如果true,浏览器准备好时开始回放。
  			autoplay: false,
  			// 默认情况下将会消除任何音频。
  			muted: false,
  			// 导致视频一结束就重新开始。
  			loop: false,
  			// 建议浏览器在
  			preload: 'auto',
  			language: 'zh-CN',
  			// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  			// aspectRatio: '16:13',
  			// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  			// fluid: true,
  			width: 0,
  			height: 0,
  			sources: [{
  				//类型
  				type: "video/mp4",
  				//url地址
  				src: ''
  			}],
  			//你的封面地址
  			poster: '',
  			//允许覆盖Video.js无法播放媒体源时显示的默认信息。
  			notSupportedMessage: '此视频暂无法播放，请稍后再试',
  			controlBar: {
  				timeDivider: true,
  				durationDisplay: true,
  				remainingTimeDisplay: false,
  				//全屏按钮
  				fullscreenToggle: true,
  			}
  		},
  		screenWidth:document.body.clientWidth,//body宽
  		swiper_new_media: 0, //swiper块高
  		
  		video_pause: 0, //判断滑动块位置是不是video
  		videoType: true, //这里判断滑动块是video界面时的视频状态（暂停、播放）
  		
  		currents:0,//轮播当前号
  		jiaobiao_number:0,//角标数,根据图片长度和视频长度之和
  	},
  	created:function() {
  		var that = this;
  		that.swiper_new_media = that.screenWidth * 1;swiper块高和body宽比例取值

//-----------------------修改视频参数------------------------------------
  		that.playerOptions['width'] = that.screenWidth;//修改data里playerOptions数组里面的视频宽width
  		that.playerOptions['height'] = that.swiper_new_media;//修改data里playerOptions数组里面视频高height
  		that.playerOptions['sources'][0]['src'] = "xxxxxx";
  		that.playerOptions['poster'] = "xxxxxxx"; //给视频赋第一张图
  	},
  	methods:{
  		swiper_change:function(index){//swiper切换
  			var that = this;
  			that.currents = index;
  			var myVideo = document.getElementsByTagName('video')[0];
  			if (index === 0) {
  				that.video_pause = 0;//当在0（视频）处，赋值为0，其他地方赋值为1，为了后面判断切换状态
  				if (myVideo.currentTime > 0) {//判断视频是否被点击观看
  					if (that.videoType == true) { //判断之前离开video滑块时是否暂停播放
  						myVideo.play();
  					} else {
  						return;
  					}
  				}
  			} else {
  				that.video_pause = 1;
  				myVideo.pause();
  			}
  		},
  		onPlayPause:function(){
  			var that = this;
  			if (that.video_pause == 0) {
  				that.videoType = false; //赋值视频已暂停
  			}
  		},
  		onPlayPlay:function(){
  			var that = this;
  			if (that.video_pause == 0) {
  				that.videoType = true; //赋值视频已播放
  			}
  		},
  		onPlayEnded:function(){
  			if (document.fullscreenElement) {//判断当前视频已经播放结束
  				player.exitFullscreen() //强制退出全屏，恢复正常大小
  			}
  		},
  	}
})