uniapp 使用renderjs 封装 video-player 视频播放器， html5视频播放器-解决视频层级、覆盖、播放卡顿

原创 于 2025-11-07 11:11:20 发布 · 293 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #音视频 #html5

uniApp 项目中，uniapp 提供的的 video 原生视频组件层级太高，难以遮挡；该视频播放器可以被其他元素进行覆盖、遮挡，解决video原生视频播放视频会出现卡顿问题。

代码示例

<template>
  <view
    class="player-wrapper"
    :id="videoWrapperId"
    :parentId="id"
    :randomNum="randomNum"
    :change:randomNum="domVideoPlayer.randomNumChange"
    :viewportProps="viewportProps"
    :change:viewportProps="domVideoPlayer.viewportChange"
    :videoSrc="videoSrc"
    :change:videoSrc="domVideoPlayer.initVideoPlayer"
    :command="eventCommand"
    :change:command="domVideoPlayer.triggerCommand"
    :func="renderFunc"
    :change:func="domVideoPlayer.triggerFunc"
  />
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: '',
    },
    autoplay: {
      type: Boolean,
      default: false,
    },
    loop: {
      type: Boolean,
      default: false,
    },
    controls: {
      type: Boolean,
      default: false,
    },
    objectFit: {
      type: String,
      default: 'contain',
    },
    muted: {
      type: Boolean,
      default: false,
    },
    playbackRate: {
      type: Number,
      default: 1,
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
    poster: {
      type: String,
      default: '',
    },
    id: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      randomNum: Math.floor(Math.random() * 100000000),
      videoSrc: '',
      // 父组件向子组件传递的事件指令（video的原生事件）
      eventCommand: null,
      // 父组件传递过来的，对 renderjs 层的函数执行（对视频控制的自定义事件）
      renderFunc: {
        name: null,
        params: null,
      },
      // 提供给父组件进行获取的视频属性
      currentTime: 0,
      duration: 0,
      playing: false,
    }
  },
  watch: {
    // 监听视频资源地址更新
    src: {
      handler(val) {
        if (!val) return
        setTimeout(() => {
          this.videoSrc = val
        }, 0)
      },
      immediate: true,
    },
  },
  computed: {
    videoWrapperId() {
      return `video-wrapper-${this.randomNum}`
    },
    // 聚合视图层的所有数据变化，传给renderjs的渲染层
    viewportProps() {
      return {
        autoplay: this.autoplay,
        muted: this.muted,
        controls: this.controls,
        loop: this.loop,
        objectFit: this.objectFit,
        poster: this.poster,
        isLoading: this.isLoading,
        playbackRate: this.playbackRate,
      }
    },
  },
  // 方法
  methods: {
    // 传递事件指令给父组件
    eventEmit({ event, data }) {
      this.$emit(event, data)
    },
    // 修改view视图层的data数据
    setViewData({ key, value }) {
      key && this.$set(this, key, value)
    },
    // 重置事件指令
    resetEventCommand() {
      this.eventCommand = null
    },
    // 播放指令
    play() {
      this.eventCommand = 'play'
    },
    // 暂停指令
    pause() {
      this.eventCommand = 'pause'
    },
    // 重置自定义函数指令
    resetFunc() {
      this.renderFunc = {
        name: null,
        params: null,
      }
    },
    // 自定义函数 - 移除视频
    remove(params) {
      this.renderFunc = {
        name: 'removeHandler',
        params,
      }
    },
    // 自定义函数 - 全屏播放
    fullScreen(params) {
      this.renderFunc = {
        name: 'fullScreenHandler',
        params,
      }
    },
    // 自定义函数 - 跳转到指定时间点
    toSeek(sec, isDelay = false) {
      this.renderFunc = {
        name: 'toSeekHandler',
        params: { sec, isDelay },
      }
    },
  },
}
</script>

<script module="domVideoPlayer" lang="renderjs">
const PLAYER_ID = 'DOM_VIDEO_PLAYER'
export default {
  data() {
    return {
      num: '',
      videoEl: null,
      loadingEl: null,
      // 延迟生效的函数
      delayFunc: null,
      renderProps: {}
    }
  },
  computed: {
    playerId() {
      return `${PLAYER_ID}_${this.num}`
    },
    wrapperId() {
      return `video-wrapper-${this.num}`
    }
  },
  methods: {
    isApple() {
      const ua = navigator.userAgent.toLowerCase()
      return ua.indexOf('iphone') !== -1 || ua.indexOf('ipad') !== -1
    },
    async initVideoPlayer(src) {
      this.delayFunc = null
      await this.$nextTick()
      if (!src) return
      if (this.videoEl) {
        // 切换视频源
        if (!this.isApple() && this.loadingEl) {
          this.loadingEl.style.display = 'block'
        }
        this.videoEl.src = src
        return
      }

      const videoEl = document.createElement('video')
      this.videoEl = videoEl
      // 开始监听视频相关事件
      this.listenVideoEvent()

      const { autoplay, muted, controls, loop, playbackRate, objectFit, poster } = this.renderProps
      videoEl.src = src
      videoEl.autoplay = autoplay
      videoEl.controls = controls
      videoEl.loop = loop
      videoEl.muted = muted
      videoEl.playbackRate = playbackRate
      videoEl.id = this.playerId
      // videoEl.setAttribute('x5-video-player-type', 'h5')
      videoEl.setAttribute('preload', 'auto')
      videoEl.setAttribute('playsinline', true)
      videoEl.setAttribute('webkit-playsinline', true)
      videoEl.setAttribute('crossorigin', 'anonymous')
      videoEl.setAttribute('controlslist', 'nodownload')
      videoEl.setAttribute('disablePictureInPicture', true)
      videoEl.style.objectFit = objectFit
      poster && (videoEl.poster = poster)
      videoEl.style.width = '100%'
      videoEl.style.height = '100%'

      // 插入视频元素
      // document.getElementById(this.wrapperId).appendChild(videoEl)
      const playerWrapper = document.getElementById(this.wrapperId)
      playerWrapper.insertBefore(videoEl, playerWrapper.firstChild)

      // 插入loading 元素（遮挡安卓的默认加载过程中的黑色播放按钮）
      this.createLoading()
    },
    // 创建 loading
    createLoading() {
      const { isLoading } = this.renderProps
      if (!this.isApple() && isLoading) {
        const loadingEl = document.createElement('div')
        this.loadingEl = loadingEl
        loadingEl.className = 'loading-wrapper'
        loadingEl.style.position = 'absolute'
        loadingEl.style.top = '0'
        loadingEl.style.left = '0'
        loadingEl.style.zIndex = '1'
        loadingEl.style.width = '100%'
        loadingEl.style.height = '100%'
        loadingEl.style.backgroundColor = 'black'
        document.getElementById(this.wrapperId).appendChild(loadingEl)

        // 创建 loading 动画
        const animationEl = document.createElement('div')
        animationEl.className = 'loading'
        animationEl.style.zIndex = '2'
        animationEl.style.position = 'absolute'
        animationEl.style.top = '50%'
        animationEl.style.left = '50%'
        animationEl.style.marginTop = '-15px'
        animationEl.style.marginLeft = '-15px'
        animationEl.style.width = '30px'
        animationEl.style.height = '30px'
        animationEl.style.border = '2px solid #FFF'
        animationEl.style.borderTopColor = 'rgba(255, 255, 255, 0.2)'
        animationEl.style.borderRightColor = 'rgba(255, 255, 255, 0.2)'
        animationEl.style.borderBottomColor = 'rgba(255, 255, 255, 0.2)'
        animationEl.style.borderRadius = '100%'
        animationEl.style.animation = 'circle infinite 0.75s linear'
        loadingEl.appendChild(animationEl)

        // 创建 loading 动画所需的 keyframes
        const style = document.createElement('style')
        const keyframes = `
          @keyframes circle {
            0% {
              transform: rotate(0);
            }
            100% {
              transform: rotate(360deg);
            }
          }
        `
        style.type = 'text/css'
        if (style.styleSheet) {
          style.styleSheet.cssText = keyframes
        } else {
          style.appendChild(document.createTextNode(keyframes))
        }
        document.head.appendChild(style)
      }
    },
    // 监听视频相关事件
    listenVideoEvent() {
      // 播放事件监听
      const playHandler = () => {
        this.$ownerInstance.callMethod('eventEmit', { event: 'play' })
        this.$ownerInstance.callMethod('setViewData', {
          key: 'playing',
          value: true
        })

        if (this.loadingEl) {
          this.loadingEl.style.display = 'none'
        }
      }
      this.videoEl.removeEventListener('play', playHandler)
      this.videoEl.addEventListener('play', playHandler)

      // 暂停事件监听
      const pauseHandler = () => {
        this.$ownerInstance.callMethod('eventEmit', { event: 'pause' })
        this.$ownerInstance.callMethod('setViewData', {
          key: 'playing',
          value: false
        })
      }
      this.videoEl.removeEventListener('pause', pauseHandler)
      this.videoEl.addEventListener('pause', pauseHandler)

      // 结束事件监听
      const endedHandler = () => {
        this.$ownerInstance.callMethod('eventEmit', { event: 'ended' })
        this.$ownerInstance.callMethod('resetEventCommand')
      }
      this.videoEl.removeEventListener('ended', endedHandler)
      this.videoEl.addEventListener('ended', endedHandler)

      // 加载完成事件监听
      const canPlayHandler = () => {
        this.$ownerInstance.callMethod('eventEmit', { event: 'canplay' })
        this.execDelayFunc()
      }
      this.videoEl.removeEventListener('canplay', canPlayHandler)
      this.videoEl.addEventListener('canplay', canPlayHandler)

      // 加载失败事件监听
      const errorHandler = (e) => {
        if (this.loadingEl) {
          this.loadingEl.style.display = 'block'
        }
        this.$ownerInstance.callMethod('eventEmit', { event: 'error' })
      }
      this.videoEl.removeEventListener('error', errorHandler)
      this.videoEl.addEventListener('error', errorHandler)

      // loadedmetadata 事件监听
      const loadedMetadataHandler = () => {
        this.$ownerInstance.callMethod('eventEmit', { event: 'loadedmetadata' })
        // 获取视频的长度
        const duration = this.videoEl.duration
        this.$ownerInstance.callMethod('eventEmit', {
          event: 'durationchange',
          data: duration
        })

        this.$ownerInstance.callMethod('setViewData', {
          key: 'duration',
          value: duration
        })

        // 加载首帧视频 模拟出封面图
        this.loadFirstFrame()
      }
      this.videoEl.removeEventListener('loadedmetadata', loadedMetadataHandler)
      this.videoEl.addEventListener('loadedmetadata', loadedMetadataHandler)

      // 播放进度监听
      const timeupdateHandler = (e) => {
        const currentTime = e.target.currentTime
        this.$ownerInstance.callMethod('eventEmit', {
          event: 'timeupdate',
          data: currentTime
        })

        this.$ownerInstance.callMethod('setViewData', {
          key: 'currentTime',
          value: currentTime
        })

      }
      this.videoEl.removeEventListener('timeupdate', timeupdateHandler)
      this.videoEl.addEventListener('timeupdate', timeupdateHandler)

      // 倍速播放监听
      const ratechangeHandler = (e) => {
        const playbackRate = e.target.playbackRate
        this.$ownerInstance.callMethod('eventEmit', {
          event: 'ratechange',
          data: playbackRate
        })
      }
      this.videoEl.removeEventListener('ratechange', ratechangeHandler)
      this.videoEl.addEventListener('ratechange', ratechangeHandler)

      // 全屏事件监听
      if (this.isApple()) {
        const webkitbeginfullscreenHandler = () => {
          const presentationMode = this.videoEl.webkitPresentationMode
          let isFullScreen = null
          if (presentationMode === 'fullscreen') {
            isFullScreen = true
          } else {
            isFullScreen = false
          }
          this.$ownerInstance.callMethod('eventEmit', {
            event: 'fullscreenchange',
            data: isFullScreen
          })
        }
        this.videoEl.removeEventListener('webkitpresentationmodechanged', webkitbeginfullscreenHandler)
        this.videoEl.addEventListener('webkitpresentationmodechanged', webkitbeginfullscreenHandler)
      } else {
        const fullscreenchangeHandler = () => {
          let isFullScreen = null
          if (document.fullscreenElement) {
            isFullScreen = true
          } else {
            isFullScreen = false
          }
          this.$ownerInstance.callMethod('eventEmit', {
            event: 'fullscreenchange',
            data: isFullScreen
          })
        }
        document.removeEventListener('fullscreenchange', fullscreenchangeHandler)
        document.addEventListener('fullscreenchange', fullscreenchangeHandler)
      }
    },
    // 加载首帧视频，模拟出封面图
    loadFirstFrame() {
      let { autoplay, muted } = this.renderProps
      if (this.isApple()) {
        this.videoEl.play()
        if (!autoplay) {
          this.videoEl.pause()
        }
      } else {
        // optimize: timeout 延迟调用是为了规避控制台的`https://goo.gl/LdLk22`这个报错
        /**
         * 原因：chromium 内核中，谷歌协议规定，视频不允许在非静音状态下进行自动播放
         * 解决：在自动播放时，先将视频静音，然后延迟调用 play 方法，播放视频
         * 说明：iOS 的 Safari 内核不会有这个，仅在 Android 设备出现，即使有这个报错也不影响的，所以不介意控制台报错的话是可以删掉这个 timeout 的
         */
        this.videoEl.muted = true
        setTimeout(() => {
          this.videoEl.play()
          this.videoEl.muted = muted
          if (!autoplay) {
            setTimeout(() => {
              this.videoEl.pause()
            }, 100)
          }
        }, 10)
      }
    },
    triggerCommand(eventType) {
      if (eventType) {
        this.$ownerInstance.callMethod('resetEventCommand')
        this.videoEl && this.videoEl[eventType]()
      }
    },
    triggerFunc(func) {
      const { name, params } = func || {}
      if (name) {
        this[name](params)
        this.$ownerInstance.callMethod('resetFunc')
      }
    },
    removeHandler() {
      if (this.videoEl) {
        this.videoEl.pause()
        this.videoEl.src = ''
        this.$ownerInstance.callMethod('setViewData', {
          key: 'videoSrc',
          value: ''
        })
        this.videoEl.load()
      }
    },
    fullScreenHandler() {
      if (this.isApple()) {
        this.videoEl.webkitEnterFullscreen()
      } else {
        this.videoEl.requestFullscreen()
      }
    },
    toSeekHandler({ sec, isDelay }) {
      const func = () => {
        if (this.videoEl) {
          this.videoEl.currentTime = sec
        }
      }

      // 延迟执行
      if (isDelay) {
        this.delayFunc = func
      } else {
        func()
      }
    },
    // 执行延迟函数
    execDelayFunc() {
      this.delayFunc && this.delayFunc()
      this.delayFunc = null
    },
    viewportChange(props) {
      this.renderProps = props
      const { autoplay, muted, controls, loop, playbackRate } = props
      if (this.videoEl) {
        this.videoEl.autoplay = autoplay
        this.videoEl.controls = controls
        this.videoEl.loop = loop
        this.videoEl.muted = muted
        this.videoEl.playbackRate = playbackRate
      }
    },
    randomNumChange(val) {
      this.num = val
    }
  }
}
</script>

<style scoped>
.player-wrapper {
  overflow: hidden;
  height: 100%;
  padding: 0;
  position: relative;
}
</style>

使用示例

<template>
  <view>
    <view style="width: 750rpx">
      <DomVideoPlayer
        ref="domVideoPlayer"
        object-fit="contain"
        :controls="controls"
        :autoplay="autoplay"
        :loop="loop"
        :src="src"
        :playback-rate="playbackRate"
        @play="onPlay"
        @pause="onPause"
        @ended="onEnded"
        @durationchange="onDurationChange"
        @timeupdate="onTimeUpdate"
        @ratechange="onRateChange"
        @fullscreenchange="onFullscreenChange"
      />
    </view>

    <!-- video的属性值 -->
    <view class="action-box">
      <view>播放进度: {{ progress }}</view>
      <view>播放时间: {{ showPlayTime }}</view>
      <view>当前时长: {{ currentTime }}</view>
      <view>总时长: {{ duration }}</view>
      <view>播放倍速: {{ playbackRate }}</view>
      <view>播放控制器: {{ controls }}</view>
      <view>循环播放: {{ loop }}</view>
      <view>自动播放: {{ autoplay }}</view>
    </view>

    <!-- 操作 -->
    <view class="action-box">
      <h3>事件调用</h3>
      <!-- 单个按钮控制播放/暂停 -->
      <button @tap="doPlaying">
        单个按钮控制：
        <text v-if="!playing">播放</text>
        <text v-else>暂停</text>
      </button>
      <!-- 分别控制播放/暂停 -->
      <button @tap="doPlay">播放</button>
      <button @tap="doPause">暂停</button>
    </view>

    <!-- 属性操作 -->
    <view class="action-box">
      <h3>更改属性</h3>
      <button @tap="switchRate">切换到{{ playbackRate === 1 ? 2 : 1 }}倍速播放</button>
      <button @tap="switchControls">切换视频控制栏：{{ !controls ? '显示' : '隐藏' }}</button>
    </view>

    <!-- 自定义操作 -->
    <view class="action-box">
      <h3>自定义事件</h3>
      <button @tap="doSeek(-15)">快退15秒</button>
      <button @tap="doSeek(15)">快进15秒</button>
      <button @tap="doFullScreen">全屏播放</button>
      <button @tap="doRemove">移除视频</button>
      <button @tap="doUpdateSrc">更换src</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import DomVideoPlayer from './DomVideoPlayer.vue'
// 将xx秒转为 xx:xx 分秒格式
const formatSec2Time = (time) => {
  const min = Math.floor(time / 60)
  const sec = Math.floor(time % 60)
  return `${min}:${sec < 10 ? '0' + sec : sec}`
}

const src = ref(
  'https://env-00jxt6hwsqjo.normal.cloudstatic.cn/2023%E5%93%81%E7%89%8C%E5%AE%A3%E4%BC%A0%E7%89%87.mp4',
)
const playing = ref(false)
const loop = ref(false)
const controls = ref(true)
const autoplay = ref(false)
const playbackRate = ref(1)
const currentTime = ref(0)
const duration = ref(0)
const domVideoPlayer = ref(null)

const progress = computed(() => {
  const percent = (currentTime.value / duration.value) * 100
  return percent.toFixed(2) + '%'
})

const showPlayTime = computed(() => {
  const curr = formatSec2Time(currentTime.value)
  const dur = formatSec2Time(duration.value)
  return `${curr} / ${dur}`
})

const onPlay = () => {
  console.log('onPlay')
  playing.value = true
}

const onPause = () => {
  console.log('onPause')
  playing.value = false
}

const onEnded = () => {
  console.log('onEnded')
  playing.value = false
}

const onDurationChange = (e) => {
  console.log('onDurationChange', e)
  duration.value = e
}

const onTimeUpdate = (e) => {
  currentTime.value = e
}

const onRateChange = (e) => {
  console.log('onRateChange', e)
  playbackRate.value = e
}

const onFullscreenChange = (e) => {
  console.log('onFullScreenChange', e)
}

const doPlaying = () => {
  if (domVideoPlayer.value.playing) {
    doPause()
  } else {
    doPlay()
  }
}

const doPlay = () => {
  domVideoPlayer.value.play()
}

const doPause = () => {
  domVideoPlayer.value.pause()
}

const doSeek = (time) => {
  time += domVideoPlayer.value.currentTime
  domVideoPlayer.value.toSeek(time)
}

const doFullScreen = () => {
  domVideoPlayer.value.fullScreen()
}

const doRemove = () => {
  src.value = ''
  domVideoPlayer.value.remove()
}

const doUpdateSrc = () => {
  src.value =
    'https://env-00jxt6hwsqjo.normal.cloudstatic.cn/2023%E5%93%81%E7%89%8C%E5%AE%A3%E4%BC%A0%E7%89%87.mp4'
}

const switchRate = () => {
  playbackRate.value = playbackRate.value === 1 ? 2 : 1
}

const switchControls = () => {
  controls.value = !controls.value
}
</script>

<style scoped>
.action-box {
  margin-top: 30rpx;
  padding: 0 60rpx;
}

.action-box button {
  margin-top: 10rpx;
}
</style>
uniapp中videojs、renderjs的使用
江拥羡橙的博客
10-09 3330
uniapp在APP端video层级最高，不能被其它覆盖，引入videojs实现，使用renderjs实现原生的DOM操作
使用uniapp开发多端短视频（用swiper+video去实现）
Hgh_1997的博客
07-14 6609
1.首先我们封装video播放器 注意：video的层级进行修改在H5中要加入x5-video-player-type="h5-page"属性进行内核处理（目前仅在微信浏览器中处理过），微信小程序IOS的版的可以动态获取video的id进行createVideoContext操作，然而安卓机中并不行，安卓机仅支持一个video的ID去操作createVideoContext <template> <view style="height: 100%;" class="vid...
uniapp的video视频属性打包app后层级过高
qq_44866810的博客
10-30 1979
在使用uniapp开发APP时，使用video标签显示视频发现H5可以正常展示，但是打包到APP后，它的层级过高，会把其他标签盖住
uniapp手机端video标签层级过高问题
qq_58174484的博客
08-15 1486
当我们想以视频作为背景时，其他dom通过定位显示在视频上方，h5页面上调试发现可以正常使用，效果如下：当放在手机上看，会发现，仅仅剩一个视频，本应在视频上层的元素不见了。经过一番排查，发现是video的层级相当高，而尝试改改zIndex的方法均生效了。
React虚拟DOM与videojs-player：性能优化点
最新发布
gitblog_00030的博客
09-21 1007
React的虚拟DOM（Virtual DOM）通过内存中DOM树的差异化计算实现高效更新，但视频播放器组件（如videojs-player）存在三大性能挑战： 1. **高频DOM操作**：视频控制、进度条更新等操作触发大量DOM变更 2. **长生命周期对象**：Video.js实例通常在组件挂载后持续存在 3. **状态同步开销**：React状态与播放器状态双向同步产生的计算成本 ## ...
关于uniapp中video层级过高的解决方案
ROYHJW040208_的博客
02-16 836
uni中原生控件video层级过高解决方案
Cocos实例3：VideoPlayer组件使用常见问题集
EricShx
03-25 3399
CocosCreator中视频组件使用常见问题
基于Qt的轻量级视频播放器，支持自动隐藏控件与流畅播放
本项目是一个基于Qt框架开发的轻量级视频播放器应用程序，其标题为“用qt编写的视频播放器，精致小巧好用，上班摸鱼必备”，充分体现了该软件的设计理念：简洁、高效、实用且具备良好的用户体验。从描述中可以看出，...
基于DASH.js的平铺视频播放器实现
“tile-player：平铺的视频播放器”是一个基于现代Web技术构建的前端视频播放解决方案，其核心目标是实现对视频内容的“平铺式”播放与展示。该项目利用了DASH.js这一开源JavaScript库，专注于通过动态自适应流媒体...
PotPlayer 1.7.3795.0 高速播放器安装包
PotPlayer 使用 EVR（Enhanced Video Renderer）作为默认视频输出方式，能够在保证色彩准确性的前提下实现低延迟、高帧率的画面呈现。结合 GPU 硬件加速技术，即使在老旧设备上也能实现 60fps 以上的平滑播放。同时...
基于Dom与Canvas的H5Player播放器实现
H5Player基于Dom和Canvas两种UI实现，是一个典型的前端多媒体播放器开发项目，其核心在于利用HTML5技术栈构建一个功能完整、界面可定制、兼容性强的网页视频/音频播放器。该项目通过提供完整的源码与工程文件，支持...
uniapp中使用renderjs添加video无法播放问题
qq_45467707的博客
05-06 3707
解决方案: 1. manifest.json模块配置选中VideoPlayer播放,并在源码视图中添加代码 2.有可能是因为DOM加载问题,在代码中延长url赋值时间(如加定时器) setTimeout(() => { // that.x为video标签实例 that.x.src = that.srcList[0].src }, 1500) 3.打包时勾选原生混淆 ...
引入Videojs之后，不能直接通过dom来调取video标签的play()方法解决方案
wflsyf的博客
10-18 1126
只要先定位到video标签的父类，然后再获取video标签即可。 例如： <!DOCTYPE html> <html lang="en"> <head> <meta charset=utf-8 /> 引入css和js <link href="http://localhost:8080/dpplayer/video-js.css" rel="stylesheet"> <script src="http://loc
html play控件,HTML DOM Video play()用法及代码示例
weixin_40000131的博客
06-07 4147
Video play()方法用于开始播放当前视频。要使用Video play()方法，必须使用控件属性来显示附加在视频上的视频控件，例如播放，暂停，搜索，音量等。用法:videoObject.play()注意：Video play()方法不接受任何参数，也不返回任何值。以下示例程序旨在说明视频play()方法：例：使用“播放”按钮播放视频。DOM Video play( ) MethodGeeks...
uniapp 基于xgplayer（西瓜视频） + renderjs开发，实现APP视频播放
qq_41919732的博客
12-25 1512
（其中 vue 变量 为 Vue 组件中的某个数据， renderjs 模块名 为之前定义的 module 属性的值，当 vue 变量 值改变时会触发 renderjs模块名.方法名 的方法）。4、**视图层向逻辑层传参：**在 template 元素的事件绑定中使用。，通过该方式触发 renderjs 中的方法，然后在这个方法中可以使用。接下来就是在renderjs中，通过xgplayer创建视频，并且完成交互。的，后续会用这个值来调用renderjs的方法。来调用普通 Vue 组件中的方法并传值。
Uniapp 之renderjs解决swiper+多个video卡顿问题
样子的博客
08-15 406
【代码】Uniapp 之renderjs解决swiper+多个video卡顿问题。
uni-app renderjs 的使用
Demon's blog
07-23 5160
/ renderjs 向普通 Vue 传值的方法。// 用于与 renderjs 通信的变量。'这是从 renderjs 传来的数据'// 接收 Vue 传来的值并进行处理。// 调用 Vue 组件中的方法。在上述示例中，定义了一个名为。调用了 Vue 组件中的。实现了 Vue 组件向。变量发生变化时，会触发。// Vue 组件中的方法。
vue视频播放插件vue-video-player的具体使用方法
闪电小子
04-24 8927
安装 1 npm install vue-video-player --save 引入 可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一） 【1】全局引用， 在main.js里面导入并引用 1 2 3 4 5 import VideoPlayer from 'vue-vi...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vue1024

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值