MENU

php随机播放视频api与前端代码 自适应版

January 4, 2025 • Read: 49 • More

Code：https://github.com/simtalk/random_video

index.html： 回车按键：全屏/默认尺寸 方向键左右：切换视频 方向键上下：音量 空格：播放/暂停
video.php 随机播放视频接口
videos文件夹 放置视频进去就可以，支持子文件夹

再此基础上，增加了手机端自适应宽高(左右和上下居中显示)的方法。电脑端设定的没有删除
在<style>标签中添加以下样式，以确保视频在手机端自适应并居中显示：

/* 原有的样式保持不变，添加以下样式 */
@media (max-width: 768px) {
  video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}

代码解释：

@media (max-width: 768px)：这是一个媒体查询，用于检测屏幕宽度是否小于或等于768像素，通常用于手机和平板设备.
position: absolute;：将视频定位为绝对定位，以便可以使用top、left和transform属性进行居中.
top: 50%; left: 50%;：将视频的顶部和左侧位置设置为父容器的50%，即屏幕的中心点.
transform: translate(-50%, -50%);：通过transform属性的translate函数，将视频向左和向上移动自身宽度和高度的50%，从而实现精确居中.
width: 100%; height: auto;：设置视频宽度为100%，高度自动调整，以保持视频的宽高比.
max-width: 100%; max-height: 100%;：设置视频的最大宽度和高度为100%，确保视频不会超出屏幕范围.

又增加了：手机端实现通过上下滑动切换视频的功能。
在现有的<script>标签中添加以下代码，以实现手机端上下滑动切换视频的功能：
【只有上滑：】

// 定义触摸开始和结束时的坐标
let touchStartY = 0;
let touchEndY = 0;

// 触摸开始事件
video.addEventListener('touchstart', function (event) {
  touchStartY = event.touches[0].clientY;
});

// 触摸结束事件
video.addEventListener('touchend', function (event) {
  touchEndY = event.changedTouches[0].clientY;
  const deltaY = touchStartY - touchEndY;

  // 判断滑动方向
  if (Math.abs(deltaY) > 50) { // 设置滑动距离阈值，可根据实际需求调整
    if (deltaY > 0) {
      // 向上滑动，切换到下一个视频
      video.src = './videos.php';
      video.load();
    } else {
      // 向下滑动，切换到上一个视频
      // 这里假设有一个获取上一个视频源的函数或逻辑
      // video.src = getPreviousVideoSrc();
      // video.load();
    }
  }
});

代码解释：

touchStartY和touchEndY：分别用于记录触摸开始和结束时的Y坐标.
touchstart事件：当用户开始触摸屏幕时触发，记录触摸点的初始Y坐标.
touchend事件：当用户结束触摸时触发，记录触摸点的最终Y坐标，并计算滑动距离deltaY.
Math.abs(deltaY) > 50：设置一个滑动距离阈值（例如50像素），只有当滑动距离超过该阈值时，才认为是一次有效的滑动操作，以避免误操作.
deltaY > 0：判断是否为向上滑动，如果是，则切换到下一个视频.
video.src = './videos.php'; video.load();：通过重新设置视频源并调用load()方法，触发视频的重新加载，实现切换到下一个视频的效果.
注释部分：如果需要支持向下滑动切换到上一个视频，可以添加相应的逻辑来获取上一个视频的源地址，并重新设置video.src属性.

【上下滑动均有：】

// 定义触摸开始和结束时的坐标
let touchStartY = 0;
let touchEndY = 0;

// 触摸开始事件
video.addEventListener('touchstart', function (event) {
  touchStartY = event.touches[0].clientY;
});

// 触摸结束事件
video.addEventListener('touchend', function (event) {
  touchEndY = event.changedTouches[0].clientY;
  const deltaY = touchStartY - touchEndY;

  // 判断滑动方向
  if (Math.abs(deltaY) > 50) { // 设置滑动距离阈值，可根据实际需求调整
    if (deltaY > 0) {
      // 向上滑动，切换到下一个视频
      video.src = './videos.php';
      video.load();
    } else if (deltaY < 0) {
      // 向下滑动，切换到上一个视频
      video.src = './videos.php';
      video.load();
    }
  }
});

代码解释：

touchStartY和touchEndY：分别用于记录触摸开始和结束时的Y坐标.
touchstart事件：当用户开始触摸屏幕时触发，记录触摸点的初始Y坐标.
touchend事件：当用户结束触摸时触发，记录触摸点的最终Y坐标，并计算滑动距离deltaY.
Math.abs(deltaY) > 50：设置一个滑动距离阈值（例如50像素），只有当滑动距离超过该阈值时，才认为是一次有效的滑动操作，以避免误操作.
deltaY > 0：判断是否为向上滑动，如果是，则切换到下一个视频.
deltaY < 0：判断是否为向下滑动，如果是，则切换到上一个视频. 在这个示例中，为了简化逻辑，向下滑动也切换到同一个视频源，实际应用中可以根据需要调整为不同的视频源.

修改后的index.html:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Player</title>
  <style>
    body {
      background-color: #000000;
    }
    video {
      margin: 0 auto;
      display: block;
      width: auto;
    }
    button {
      position: absolute;
      top: 10px;
      left: 10px;
      border: none;
      cursor: pointer;
      background-color: transparent;
      padding: 0;
      display: flex;
      align-items: center;
    }
    button img {
      filter: invert(47%) sepia(34%) saturate(1004%) hue-rotate(176deg) brightness(92%) contrast(96%);
      /* 通过滤镜将图标颜色调整为蓝色，可根据实际效果微调参数 */
    }
    button span {
      margin-left: 5px;
      color: white;
    }
    /* 原有的样式保持不变，添加以下样式 */
@media (max-width: 768px) {
  video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}
  </style>
</head>

<body>
  <video id="myVideo" controls autoplay width="640" height="360">
    <source src="./videos.php" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <button id="loopButton">
    <img id="loopIcon" src="./pause_icon.svg" alt="连播关闭图标">
    <span id="loopText">连播关闭</span>
  </button>

  <script>
    const video = document.getElementById('myVideo');
    const loopButton = document.getElementById('loopButton');
    const loopIcon = document.getElementById('loopIcon');
    const loopText = document.getElementById('loopText');
    let isLooping = false;

    // 定义音量调节步长，可根据实际需求调整大小
    const volumeStep = 0.1;

    // 页面加载完成时获取页面可视高度并设置视频高度
    window.onload = function () {
      const pageHeight = window.innerHeight;
      video.style.height = pageHeight + 'px';
      video.style.width = 'auto';
    };

    // 监听按钮点击事件，切换连播功能状态及图标、文字说明
    loopButton.addEventListener('click', function () {
      isLooping =!isLooping;
      if (isLooping) {
        loopIcon.src = './play_icon.svg';
        loopText.textContent = "连播开启";
      } else {
        loopIcon.src = './pause_icon.svg';
        loopText.textContent = "连播关闭";
      }
    });

    // 监听视频播放结束事件
    video.addEventListener('ended', function () {
      if (isLooping) {
        // 如果开启连播功能，重新设置视频源，触发重新加载视频
        video.src = './videos.php';
        video.load();
      }
    });

    // 监听键盘按下事件
    document.addEventListener('keydown', function (event) {
      if (event.key === " ") {
        // 空格键控制播放暂停
        if (video.paused) {
          video.play();
        } else {
          video.pause();
        }
      } else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
        // 左右方向键刷新视频，先隐藏视频，加载完成后再显示
        video.style.display = 'none';
        video.src = './videos.php';
        video.addEventListener('loadedmetadata', function () {
          video.style.display = 'block';
        });
        video.load();
      } else if (event.key === "Enter") {
        // 回车键控制全屏/返回
        if (!document.fullscreenElement &&!document.mozFullScreenElement &&
       !document.webkitFullscreenElement &&!document.msFullscreenElement) {
          // 当前未处于全屏状态，进入全屏
          if (video.requestFullscreen) {
            video.requestFullscreen();
          } else if (video.mozRequestFullScreen) {
            video.mozRequestFullScreen();
          } else if (video.webkitRequestFullscreen) {
            video.webkitRequestFullscreen();
          } else if (video.msRequestFullscreen) {
            video.msRequestFullscreen();
          } else {
            console.log("当前浏览器不支持全屏功能");
          }
        } else {
          // 当前处于全屏状态，退出全屏
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        }
      } else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
        // 上下方向键控制音量
        handleVolumeChange(event.key);
      }
    });

    // 封装一个函数用于处理音量调整逻辑
    function handleVolumeChange(key) {
      if (key === "ArrowUp") {
        video.volume = Math.min(video.volume + volumeStep, 1);
      } else {
        video.volume = Math.max(video.volume - volumeStep, 0);
      }
    }

    video.addEventListener('play', function () {
      console.log('视频开始播放了');
    });

    video.addEventListener('pause', function () {
      console.log('视频暂停了');
    });
// 定义触摸开始和结束时的坐标
let touchStartY = 0;
let touchEndY = 0;

// 触摸开始事件
video.addEventListener('touchstart', function (event) {
  touchStartY = event.touches[0].clientY;
});

// 触摸结束事件
video.addEventListener('touchend', function (event) {
  touchEndY = event.changedTouches[0].clientY;
  const deltaY = touchStartY - touchEndY;

  // 判断滑动方向
  if (Math.abs(deltaY) > 50) { // 设置滑动距离阈值，可根据实际需求调整
    if (deltaY > 0) {
      // 向上滑动，切换到下一个视频
      video.src = './videos.php';
      video.load();
    } else if (deltaY < 0) {
      // 向下滑动，切换到上一个视频
      video.src = './videos.php';
      video.load();
    }
  }
});
  </script>
</body>

</html>


本文链接：https://blog.syylw.com/153.html
api
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment