Vue实现H5页面自动播放视频(安卓)

第一步:npm install video.js

在项目中main.js中引入

// 引入video.js
import Videojs from 'video.js'
import 'video.js/dist/video-js.min.css' 
Vue.prototype.$video = Videojs 

在项目中使用<video></video>

<video width="320" height="240" controls>
    <source src="xxxx.mp4" type="video/mp4">
</video>

第二步:在项目的 mounted里加入(读到视频后播放)

document.getElementsByTagName('video')[0].play();

    其他的自动播放添加autoplay属性即可,

    autoplay为video的自动播放属性,但是对安卓系统不起作用

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,下面是一个简单的Vue原生兼容安卓H5的短视频滑动播放器的实现: 1. 首先需要安装 `vue-touch` 插件,它可以让我们方便地处理触摸事件。可以使用以下命令安装: ``` npm install vue-touch ``` 2. 在Vue组件中引入 `vue-touch` 插件: ```javascript import VueTouch from 'vue-touch'; Vue.use(VueTouch); ``` 3. 定义一个 `SwipePlayer` 组件,该组件包含一个视频播放器和一个滑动条: ```html <template> <div class="swipe-player"> <video :src="source" ref="videoRef"></video> <div ref="sliderRef" class="slider"></div> </div> </template> ``` 4. 在组件的 `mounted` 方法中,初始化滑动条,并添加滑动事件处理程序: ```javascript mounted() { // 初始化滑动条 const slider = this.$refs.sliderRef; slider.style.width = '0%'; // 添加滑动事件处理程序 this.$swipeRight(this.handleSwipeRight); this.$swipeLeft(this.handleSwipeLeft); }, methods: { // 处理向右滑动事件 handleSwipeRight() { const video = this.$refs.videoRef; const slider = this.$refs.sliderRef; // 获取当前视频播放进度 const currentTime = video.currentTime; const duration = video.duration; // 计算新的播放进度 const newTime = Math.max(currentTime - 5, 0); const percent = (newTime / duration) * 100; // 更新视频播放进度和滑动条 video.currentTime = newTime; slider.style.width = `${percent}%`; }, // 处理向左滑动事件 handleSwipeLeft() { const video = this.$refs.videoRef; const slider = this.$refs.sliderRef; // 获取当前视频播放进度 const currentTime = video.currentTime; const duration = video.duration; // 计算新的播放进度 const newTime = Math.min(currentTime + 5, duration); const percent = (newTime / duration) * 100; // 更新视频播放进度和滑动条 video.currentTime = newTime; slider.style.width = `${percent}%`; } } ``` 5. 在 `data` 中定义视频的源地址: ```javascript data() { return { source: 'http://example.com/video.mp4' }; } ``` 6. 最后,样式可以根据需要进行自定义: ```css .swipe-player { position: relative; width: 100%; height: 300px; } .swipe-player video { width: 100%; height: 100%; object-fit: cover; } .swipe-player .slider { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background-color: #ddd; z-index: 1; } ``` 这样就完成了一个简单的Vue原生兼容安卓H5的短视频滑动播放器。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值