H5视频播放控制

最新推荐文章于 2023-11-27 15:25:54 发布

「已注销」

最新推荐文章于 2023-11-27 15:25:54 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/SK_21/article/details/109236827

版权

视频播放控制&默认横屏播放

使用场景：
移动端H5页面中，同一页面中有多个video视频标签，与此同时要求，每次点播视频时，只有当前选中视频开始播放，同一页面其它非选中视频（无论是播放状态还是其它状态）都统一暂停播放。

一、视频列表中控制只允许一个视频播放

// 获取DOM中所有的video标签
var videoTags = document.querySelectorAll('video');
// 控制播放的视频暂停
var pauseAll = function () {
   
  // 改变this指向
  var self = this;
  [].forEach.call(videoTags, function (i) {
   
  	i !== self && i.pause();
  });
}
// 改变DOM数组中的数组元素，call() 改变this指向
[].forEach.call(videoTags, function (i) {
   
	 i.addEventListener('play', pauseAll.bind(i));   
});

注：call()：调用一个对象的一个方法，用另一个对象替换当前对象，例如：arrayA.call(A,args1,args2)，即A对象调用arrayA对象的方法。

视频效果图

在这里插入图片描述

二、视频列表播放时滑动页面抖动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5视频播放控制

视频播放控制&默认横屏播放一、视频列表中控制只允许一个视频播放// 获取DOM中所有的video标签var videoTags = document.querySelectorAll('video');// 控制播放的视频暂停var pauseAll = function () { // 改变this指向 var self = this; [].forEach.call(videoTags, function (i) { i !== self && i.p
复制链接

扫一扫