利用ontimeupdate记录video播放进度

最新推荐文章于 2024-06-12 17:49:29 发布

hcqDezhp

最新推荐文章于 2024-06-12 17:49:29 发布

阅读量2.2k

点赞数

分类专栏：个人学习笔记文章标签： php

本文链接：https://blog.csdn.net/u014043168/article/details/109161226

版权

个人学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

软件版本：
php 7.1
mysql 8.0.2
Chrome

实现思路：
分两个触发点记录播放进度，一是利用video的 ontimeupdate属性每隔一分钟记录一次，而是关闭页面记录一次。当然如果视频播放只有一个端，完全可以做页面的localstorage缓存，没必要上送到服务端。如果有网页和、微信或者app几个播放端，想要不同端公用统一个播放进度，就有必要与服务端交互了。下面的代码是上送服务端的。

html代码

<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="x-ua-compatible" content="IE=edge" > 
<title>remark video process</title> 
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> 
<style> 
#player{height:400px;width:800px;} 
</style> 
</head>

<video src="" controls="controls" id="player" οntimeupdate="logtime(this)"> 
您的浏览器不支持 video 标签。 
</video>

<div id="logtime">播放时间:</div>

<script> 
var playtime = 0; 
var TimeSet = 0; 
setInterval(function(){ 
    /* console.log('crontab'); */ 
    playtime ++; 
}, 1000);

/* 
* 初次加载获取播放进度 
*/ 
$.post("http://localhost/aliyunlive/web/GetVideoProcess.php?video_id=2",{},function(result){ 
         var data = JSON.parse(result); 
         document.getElementById('player').src=data.video_link; 
         document.getElementById('player').currentTime=data.process; 
        console.log(result); 
      });

/* 
* 10秒记录一次进度 
*/ 
function logtime(obj){ 
    if(playtime > TimeSet+10){ 
        TimeSet = playtime; 
        var log_time = obj.currentTime; 
        console.log(log_time); 
        document.getElementById('logtime').innerHTML='播放时间:'+log_time; 
         
          $.post("http://localhost/aliyunlive/web/RemarkVideoProcess.php?process="+log_time+"&video_id=2",{},function(result){ 
            console.log(result); 
          }); 
    } 
}

/* 
* 关闭页面记录一次进度 
*/ 
window.οnbefοreunlοad=function(e){    
    var log_time = document.getElementById('player').currentTime; 
　   $.post("http://localhost/aliyunlive/web/RemarkVideoProcess.php?process="+log_time+"&video_id=2",{},function(result){ 
　　            console.log(result); 
          }); 
} 
</script> 
</html>

GetVideoProcess.php：

<?php 
$mysqli = mysqli_init(); 
if (!$mysqli) { 
    die('mysqli_init failed'); 
}

if (!$mysqli->options(MYSQLI_INIT_COMMAND, 'SET AUTOCOMMIT = 0')) { 
    die('Setting MYSQLI_INIT_COMMAND failed'); 
}

if (!$mysqli->options(MYSQLI_OPT_CONNECT_TIMEOUT, 5)) { 
    die('Setting MYSQLI_OPT_CONNECT_TIMEOUT failed'); 
}

if (!$mysqli->real_connect('127.0.0.1', 'root', '123456', 'VideoRemark', 3306, 'utf8mb4')) { 
    die('Connect Error (' . mysqli_connect_errno() . ') ' 
        . mysqli_connect_error()); 
}

$video_id = $_GET['video_id'];

$sql = 'select vi.*,(select pl.process from process_log as pl where pl.video_id=vi.id order by pl.id desc limit 1) as process from video_info as vi where vi.id='.$video_id; 
$info = $mysqli->query($sql)->fetch_array();

$mysqli->close();

echo json_encode($info);

RemarkVideoProcess.php

<?php 
$mysqli = mysqli_init(); 
if (!$mysqli) { 
    die('mysqli_init failed'); 
}

if (!$mysqli->options(MYSQLI_INIT_COMMAND, 'SET AUTOCOMMIT = 0')) { 
    die('Setting MYSQLI_INIT_COMMAND failed'); 
}

if (!$mysqli->options(MYSQLI_OPT_CONNECT_TIMEOUT, 5)) { 
    die('Setting MYSQLI_OPT_CONNECT_TIMEOUT failed'); 
}

if (!$mysqli->real_connect('127.0.0.1', 'root', '123456', 'VideoRemark', 3306, 'utf8mb4')) { 
    die('Connect Error (' . mysqli_connect_errno() . ') ' 
        . mysqli_connect_error()); 
}

$process = $_GET['process']; 
$video_id = $_GET['video_id'];

$sql = 'select * from video_info where id='.$video_id; 
$info = $mysqli->query($sql)->fetch_row(); 
// var_dump($info);

$create = date('Y-m-d H:i:s');

$sql = "insert into process_log(`video_id`,`process`,`create_date`) value ('{$video_id}','{$process}','{$create}')"; 
echo $sql;

$result = $mysqli->query($sql); 
mysqli_commit($mysqli);

$mysqli->close();

mysql数据准备

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for process_log
-- ----------------------------
DROP TABLE IF EXISTS `process_log`;
CREATE TABLE `process_log` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `video_id` int(11) DEFAULT NULL COMMENT '视频id',
  `process` float(10,4) NOT NULL COMMENT '观看进度',
  `create_date` timestamp NULL DEFAULT NULL COMMENT '创建时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

-- ----------------------------
-- Table structure for video_info
-- ----------------------------
DROP TABLE IF EXISTS `video_info`;
CREATE TABLE `video_info` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `video_name` varchar(50) COLLATE utf8mb4_general_ci NOT NULL COMMENT '视频名称',
  `video_link` varchar(255) COLLATE utf8mb4_general_ci NOT NULL COMMENT '视频连接',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

SET FOREIGN_KEY_CHECKS = 1;

INSERT INTO `VideoRemark`.`video_info`(`id`, `video_name`, `video_link`) VALUES (2, '介绍视频', 'http://localhost/aliyunlive/web/1581410556698554.mp4');