vue封装一个视频组件（兼容ios和android）

刺骨的言语ヽ痛彻心扉 2022-05-26 06:11 195阅读 0赞

做H5手机端的视频播放器，在期间发现了很多问题，哈哈，也是在不断摸索中成长，废话不多说，放代码：

组件videoChild.vue文件：

<template>
      <div class="container" :class="[{an:isAndroid,ios:isiOS}]">
        <video id="first-video"
        			 width="100%"
        			 height="100%"
        			 x5-video-player-type="h5"
        			 x5-video-player-fullscreen="true"
        			 x5-playsinline=""
        			 playsinline
        			 webkit-playsinline=""
        			 preload="auto"
        			 :poster="poster"
        			 :src="url"
        			 :playOrPause="playOrPause"
        			 x-webkit-airplay="allow"
        			 @click="pauseVideo"
        			 @ended="onPlayerEnded($event)"
        >
        </video>
        <img v-show="isVideoShow" class="play" @click="playvideo" v-if="isiOS" :src="poster" />
      	<img v-show="isShow" class="platStart" @click="androidPlay" v-if="isAndroid"  :src="poster">
    
      </div>
    </template>

<script>
    	export default {
    	  name: 'videoChild',
    	  props: {
    			'url': String,
    			'poster': String
    		},
    	  data () {
    	    var u = navigator.userAgent
    	    return {
    //	      poster: this.appConfig('app.img_url'),
    //	      videoUrl: this.appConfig('app.video_url'),
    				isVideoShow: true,
    				isShow: true,
    				playOrPause: true,
    	      video: null,
    	      isAndroid: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
    	      isiOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
    	    }
    	  },
    	  methods: {
    	  	playvideo (event) {
    	  		if (this.isiOS) {
    		      let video = document.querySelector('video')
    		      
    		      this.isVideoShow = false
    		      video.play()
    //          进入全屏
    		      window.onresize = function () {
    	          video.style.width = window.innerWidth + 'px'
    	          video.style.height = window.innerHeight + 'px'
    	        }
    		    }
    	  	},
    	  	pauseVideo () {  //暂停\播放
    		    let video = document.querySelector('video')
    		    if (this.playOrPause) {
              video.pause()
            } else {
              video.play()
            }
            this.playOrPause = !this.playOrPause
    		  },
    	    onPlayerEnded (player) { //视频结束
    	    	this.isVideoShow = true
    	    	this.isShow = true
    	    },
    	    androidPlay () {
    	      let video = document.querySelector('video')
    	      this.isShow = false
    	      video.play()
    	    }
    	  }
    	}
    </script>

<style scoped>
    	#first-video{
        object-fit: fill;
      }
      .container {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 999;
      }
      .play,.platStart{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    </style>

以上是组件的代码。如何调用请往下看：

<template>
      <div class="container">
        <child :url='videoURL' :poster="poster"></child>
      </div>
    </template>
    <script>
      import child from '@/components/videoChild'
    export default {
    		name: 'app',
    		data() {
    			return {
    				videoURL:'你的视频路径',
    				poster: ''
    			}
    		},
    		components: {
           child
       	}
        
    }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 基于 el-upload 封装视频上传组件

基于 Vue 和 Element UI 的 el-upload 组件，我们可以封装一个视频上传组件。以下是一个基本的实现方式：首先，你需要在你的项目中安装 Element

女爷i/ 2024年02月05日 22:45/ 0 赞/ 28 阅读

相关如何封装一个Vue + ElementUI的弹窗组件

前言本文将介绍如何封装一个Vue和ElementUI的弹窗组件。弹窗组件是Web开发中常用的交互组件，可以用于展示一些重要信息、警告，或者用于用户的输入。 1. 安

迷南。/ 2023年09月24日 22:58/ 0 赞/ 158 阅读

相关【vue3】封装一个count-to计数器组件

> 本文目的：练习在vue中，基于第三方CountUp.js，封装一个计数器组件 countUp.js简介 countUp.js是一个由js实现的拥有渐变效果的计数器

骑猪看日落/ 2023年06月25日 06:14/ 0 赞/ 13 阅读

相关 vue封装组件总结

父组件引用子组件,设置props <add tableName="mysql"/> <add :tableName="mysql"/> 这二个的

分手后的思念是犯贱/ 2023年06月22日 04:22/ 0 赞/ 22 阅读

相关 ios和Android常见的兼容问题

H5混合开发中 ios和Android常见的兼容问题 1.滑动不流畅问题，这个滑动不流畅好像局限于局部的滚动，建议都写成全局滚动，在css样式中加上： body

刺骨的言语ヽ痛彻心扉/ 2023年06月19日 11:21/ 0 赞/ 13 阅读

相关 Vue封装组件-按钮-LjButton

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQw

痛定思痛。/ 2022年09月03日 04:28/ 0 赞/ 312 阅读

相关 Vue 封装一个折叠面板组件

该组件使用了 Element 的一些 icon 图标，以及过渡动画 el-collapse-transition，需安装 element ![在这里插入图片描述][1d8

女爷i/ 2022年08月28日 14:51/ 0 赞/ 468 阅读

相关 vue封装一个视频组件（兼容ios和android）

做H5手机端的视频播放器，在期间发现了很多问题，哈哈，也是在不断摸索中成长，废话不多说，放代码：组件videoChild.vue文件： <template>

刺骨的言语ヽ痛彻心扉/ 2022年05月26日 06:11/ 0 赞/ 196 阅读

相关在Vue中封装一个上传文件组件

封装一个上传文件的组件，如下： ![这里写图片描述][70] 使用`<input type='file'>` 来实现文件上传，具体操作参照以往JS版的实现这里主要

谁践踏了优雅/ 2022年05月19日 07:41/ 0 赞/ 294 阅读

相关 vue实现四则运算封装组件

<template> <div> <el-row class="tableRowAlign"> <el-col :span="24"

你的名字/ 2021年09月27日 22:54/ 0 赞/ 631 阅读