Vue 原始(传统)或特别的视频组件具体实现方法

这篇具有很好参考价值的文章主要介绍了Vue 原始(传统)或特别的视频组件具体实现方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、原始的播放器组件(传统的视频播放组件)

参考链接

1. Vue2视频播放(Video)

二、自定义视频播放组件,自播放,无控制模式

简单点的理解,就是没有点击就会暂停播放视频,还有忽略了音频,鼠标点击视频也不会停止,完全自循环播放,后面就是对这个视频进行灵活的前端排版了。

1. Video.vue 文件:

<template>
  <div class="m-video" :class="{'u-video-hover': !vplay}">
    <video
      ref="veo"
      :src="videoSrc"
      :autoplay="autoplay"
      :controls="!originPlay&&controls"
      :loop="loop"
      :muted="autoplay || muted"
      webkit-playsinline
      x5-playsinline
      playsinline
      v-bind="$attrs"
      @loadeddata="poster ? e => e.preventDefault():getPoster()"
      >
    </video>
  </div>
</template>
<script>
export default {
  name: 'Video',
  props: {
    videoSrc: { // 视频文件url,必传,支持网络地址 https 和相对地址 require('@/assets/files/Bao.mp4')
      type: String,
      required: true,
      default: null
    },
    videoPoster: { // 视频封面url,支持网络地址 https 和相对地址 require('@/assets/images/Bao.jpg')(在未设置封面且preload不等于none时,自动获取视频第0.3s对应帧作为封面图)
      type: String,
      default: null
    },
    width: { // 视频播放器宽度
      type: Number,
      default: 800
    },
    height: { // 视频播放器高度
      type: Number,
      default: 450
    },
    /*
      参考 MDN 自动播放指南:https://developer.mozilla.org/zh-CN/docs/Web/Media/Autoplay_guide
      Autoplay 功能
      据新政策,媒体内容将在满足以下至少一个的条件下自动播放:
      1.音频被静音或其音量设置为 0
      2.用户和网页已有交互行为(包括点击、触摸、按下某个键等等)
      3.网站已被列入白名单;如果浏览器确定用户经常与媒体互动,这可能会自动发生,也可能通过首选项或其他用户界面功能手动发生
      4.自动播放策略应用到<iframe>或者其文档上
      autoplay:由于目前在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,
      已不再允许自动播放音频和视频。就算你为video或audio标签设置了autoplay属性也一样不能自动播放!
      解决方法:设置视频 autoplay 时,视频必须设置为静音 muted: true 即可实现自动播放,
      然后用户可以使用控制栏开启声音,类似某宝商品自动播放的宣传视频逻辑
    */
    autoplay: { // 视频就绪后是否马上播放
      type: Boolean,
      default: false
    },
    controls: { // 是否向用户显示控件,比如进度条,全屏
      type: Boolean,
      default: false
    },
    loop: { // 视频播放完成后,是否循环播放
      type: Boolean,
      default: true
    },
    muted: { // 是否静音
      type: Boolean,
      default: true
    },
    preload: { // 是否在页面加载后载入视频,如果设置了autoplay属性,则preload将被忽略;
      type: String,
      default: 'auto' // auto:一旦页面加载,则开始加载视频; metadata:当页面加载后仅加载视频的元数据 none:页面加载后不应加载视频
    },
    showPlay: { // 播放暂停时是否显示播放器中间的暂停图标
      type: Boolean,
      default: false
    },
    playWidth: { // 中间播放暂停按钮的边长
      type: Number,
      default: 96
    },
    zoom: { // video的poster默认图片和视频内容缩放规则
      type: String,
      default: 'none' // none:(默认)保存原有内容,不进行缩放; fill:不保持原有比例,内容拉伸填充整个内容容器; contain:保存原有比例,内容以包含方式缩放; cover:保存原有比例,内容以覆盖方式缩放
    }
  },
  data () {
    return {
      poster: this.videoPoster,
      originPlay: true,
      vplay: false
    }
  },
  mounted () {
    if (this.showPlay) {
      this.$refs.veo.addEventListener('pause', this.onPause)
      this.$refs.veo.addEventListener('playing', this.onPlaying)
    }
    if (this.autoplay) {
      this.vplay = true
      this.originPlay = false
    }
    /*
      自定义设置播放速度,经测试:
      在vue2中需设置:this.$refs.veo.playbackRate = 2
      在vue3中需设置:veo.value.defaultPlaybackRate = 2
    */
    // this.$refs.veo.playbackRate = 2
  },
  methods: {
    /*
      loadeddata 事件在媒体当前播放位置的视频帧(通常是第一帧)加载完成后触发
      preload为none时不会触发
    */
    getPoster () { // 在未设置封面时,自动获取视频0.3s对应帧作为视频封面
      // 由于不少视频第一帧为黑屏,故设置视频开始播放时间为0.3s,即取该时刻帧作为封面图
      this.$refs.veo.currentTime = 0.3
      // 创建canvas元素
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      // canvas画图
      canvas.width = this.$refs.veo.videoWidth
      canvas.height = this.$refs.veo.videoHeight
      ctx.drawImage(this.$refs.veo, 0, 0, canvas.width, canvas.height)
      // 把canvas转成base64编码格式
      this.poster = canvas.toDataURL('image/png')
    },
    onPlay () {
      console.log('click')
      if (!this.autoplay) {
        this.vplay = true
        this.originPlay = false
        this.$refs.veo.play()
      } else {
        this.$refs.veo.pause()
      }
    },
    onPause () {
      this.vplay = false
      console.log('pause')
      this.$once('hook:beforeDestroy', function () {
        removeEventListener('pause', this.onPause)
      })
    },
    onPlaying () {
      this.vplay = true
      console.log('playing')
      // 自动清理自己,避免内存泄漏
      this.$once('hook:beforeDestroy', function () {
        removeEventListener('playing', this.onPlaying)
      })
    }
  }
}
</script>



2. 其他组件引用该 Video.vue 文件实现方法

test.vue文件演示:文章来源地址https://www.toymoban.com/news/detail-651911.html

<template>
	.
	.
	.
<Video
                :videoSrc="videoSrc"
                :autoplay="true"
                :controls="false"
                :loop="true"
                :muted="false"
                preload="auto"
                :showPlay="false"
                zoom="contain"
              />
   .
   .
   .
              </template>
<script>
import Video from './testview/Video'

export default {
  components: {Video},
  data() {
    return {
      videoSrc: require('../assets/videos/test.mp4'),
      videoPoster: require('../assets/img/picture.png'),
      }
     }
   }
</script>

到了这里,关于Vue 原始(传统)或特别的视频组件具体实现方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • python开发项目基于语音识别的智能垃圾分类系统的设计与实现【源码+论文+演示视频+包运行成功】

     博主介绍 :擅长Java、微信小程序、Python、Android等,专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精彩专栏 推荐订阅 👇🏻 不然下次找不到哟 Java项目精品实战案例(300套) Java微信小程序项目实战(200套) Python项目精品实战案例(100套) 目录

    2024年02月12日
    浏览(44)
  • Android笔记(八):基于CameraX库结合Compose和传统视图组件PreviewView实现照相机画面预览和照相功能

    CameraX是JetPack库之一,通过CameraX可以向应用增加相机的功能。在下列内容中,将介绍一个结合CameraX实现一个简单的拍照应用。本应用必须采用Android SDK 34。并通过该简单示例,了解传统View层次组件的UI组件如何与Compose组件结合实现移动应用界面的定制。 首先,新建一个项目

    2024年02月08日
    浏览(42)
  • 登录页的具体实现 (小兔鲜儿)【Vue3】

    整体认识 登录页面的主要功能就是 表单校验和登录登出业务 准备模板 配置路由跳转 为什么需要校验 作用:前端提前校验可以 省去一些错误的请求提交 ,为后端节省接口压力 表单如何进行校验 ElementPlus表单组件内置了表单校验功能,只需要 按照组件要求配置必要参数 即

    2024年02月15日
    浏览(52)
  • ffmpeg根据原始视频的帧率进行提取视频帧

    直接上代码,自己编写的。。。有问题可以提 安装教程看这个:https://blog.csdn.net/m0_61497715/article/details/129817641 去官网下个最新的ffmpeg,解压到随便的目录,上级目录最好不要用中文; 然后去设置环境变量,加入ffmpeg的bin路径; 查看是否设置成功使用ffmpeg -version。

    2024年02月16日
    浏览(39)
  • 【备忘录】uni-app的地图相关组件操作,uni-app接入腾讯地图API的具体实现

    官方帮助文档:https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview 进行一些简单的配置 Uniapp提供的位置相关的服务: https://uniapp.dcloud.net.cn/api/location/location.html UniApp提供的地图组件 https://uniapp.dcloud.net.cn/component/map.html 文档针对微信小程序进行设置,其他端使用这些组件还需要参

    2023年04月26日
    浏览(60)
  • Unity UGUI的RawImage(原始图片)组件的介绍及使用

    RawImage是Unity UGUI中的一个组件,用于显示原始图片。与Image组件不同,RawImage可以直接显示原始图片的像素数据,而不需要经过额外的处理。 RawImage组件通过将原始图片的像素数据直接传递给显卡进行渲染,从而实现显示原始图片的功能。它可以显示各种格式的图片,包括常见

    2024年02月16日
    浏览(51)
  • 【vue3播放监控视频的组件video】

    @[组件解决视频不能播放问题],一个组件直接搞定!!!! 子组件 在父组件中直接引入即可 1.引入 2.使用

    2024年04月12日
    浏览(37)
  • SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--具体功能实现【三】

    需求分析/图解 思路分析 完成后台代码从dao - serivce - controller , 并对每层代码进行测试, 到controller 这一层,使用Postman 发送http post 请求完成测试 完成前端代码, 使用axios 发送ajax(json 数据)给后台, 实现添加家居信息 代码实现 创建srcmainjavacomnlcfurnsserviceFurnService.java 和src

    2024年02月14日
    浏览(40)
  • 告别原始 UI 样式,拥抱 Fluent Design 风格 PyQt/PySide 组件库

    这是一个使用 PyQt/PySide 编写的 Fluent Design 风格的组件库,支持亮暗主题无缝切换和自定义主题色,搭配 QtDesigner 可以快速开发美观的界面。github 仓库地址为 https://github.com/zhiyiYo/PyQt-Fluent-Widgets ,演示视频可以在哔哩哔哩上观看。 轻量版 ( AcrylicLabel 不可用): 完整版: 如果项

    2024年02月10日
    浏览(28)
  • Vue-Html5-Video组件视频缓存本地技术

    Vue.js本身并不提供将视频缓存到本地的功能,但是可以通过使用HTML5的video标签和浏览器提供的缓存机制来实现。 具体实现步骤如下: 1. 在Vue组件中使用video标签来加载视频,如下所示: ```html video ref=\\\"videoPlayer\\\" controls source :src=\\\"videoUrl\\\" type=\\\"video/mp4\\\" /video ``` 其中,videoUrl是视频

    2024年02月16日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包