使用Livewire收集时间视频指标

今天我们将使用Livewire将视频事件数据发送到我们的Laravel服务器。需要为您的Laravel应用快速获得成功？现在就在Fly.io上部署，快速运行您的Laravel应用！Laravel应用运行。

好了，击鼓。因为今天，我们将截取三个用户与视频的交互事件，并使用Livewire轻松地将事件数据发送到我们的服务器！

问题

有时我们希望了解用户如何与我们网站上展示的视频文件进行交互。

例如。让我们设想我们有一个使用Laravel构建的网站，我们在这里分享在线课程。每门课程都会有视频课程，用户可以观看并完成它们以通过课程。

不知道哪些特定时间用户通常暂停课程会不错吗？或者用户再次播放视频前的暂停时长是多少？用户经常访问的时间点呢？

解决方案

视频标签会发出一些事件，我们可以将其挂钩以了解用户如何与不同的视频课程交互。在本文中，我们将演示通过三个事件来监控用户与视频交互数据：

暂停事件 - 确定用户通常在何时暂停课程
播放事件 - 确定在再次播放课程之前暂停时长
seeked 事件 - 通常用来确定跳转到课程的时间点

今天，我们将挂钩到这些事件以获取相关数据，并使用 Livewire 来轻松地将数据共享到我们的服务器 🌟

设置视频路由

我们将通过一个端点访问我们的视频文件

Route::get('/videos/{id}',
    [\App\Http\Controllers\VideoController::class,'stream']
)->name('videos.stream');

我们的 VideoController 类将有一个简单的流方法

public function stream(Request $request, $id){
    // getFileDetails() is a custom method to get our video file!
    $details = $this->getFileDetails( $id );
    $header = [
        'Cache-Control','no-cache, must-revalidate'
    ];
    return response()->file(storage_path($details['path']),$header);
}

现在我们已经设置了视频文件的路由，让我们继续创建一个 Livewire 组件来播放这段视频文件。

设置 Livewire 组件

让我们使用 php artisan make:livewire video-player 创建一个 Livewire 组件。这将创建两个文件：一个组件和一个视图。我们可以将这个组件嵌入到任何 blade 视图中，甚至可以向它传递参数，如下所示：

@livewire('video-player', ['videoId'=>1])

要使用 videoId，我们必须在我们的组件中声明一个相匹配的公共属性。我们将在下面使用这个属性来创建访问我们的视频文件的路径。首先，让我们修改我们的视图。

我们将添加一个没有源的视频标签；我们不会立即获取源，而是先让页面渲染视频标签。然后，我们将使用 Livewire 的 wire:init 指令在渲染后触发加载源

<!-- view -->
<div wire:init="initVideo">
  <video wire:ignore
    id="videoPlayer" controls width="500px" height="900px"
  />
</div>

一旦页面加载完成，将调用 wire:init 指令的方法 initVideo()。我们可以在该方法中做一些初始处理。一个例子就是生成一个临时的 $url 来访问我们的视频文件。

然后我们可以使用 Livewire 的 dispatchBrowserEvent() 方法来通知视图的 JavaScript 接收这个 URL，通过触发一个名为 init-complete 的自定义事件

/* Component */
public $videoId;

public function initVideo()

  // As mentioned above, generate url with $videoId
  $url =  URL::temporarySignedRoute(
    'videos.stream', now()->addMinutes(30), ['id' =>  $this->videoId]
  );
  // Notify client to set source
  $this->dispatchBrowserEvent('init-complete', ['url'=>$url]);
}

我们可以在 JavaScript 中监听这个事件，并最终设置视频标签的源

<!-- view -->
<script>
  var video = document.getElementById("videoPlayer");
  window.addEventListener('init-complete', event => {
    video.src = event.detail.url;
  });

现在我们的视频标签正在加载源（在页面加载后整洁地加载），是我们监控用户与视频交互的时候了！

只有时间能告诉我们

我们可以使用的主要数据之一来了解用户如何与我们的视频课程互动的是时间数据。在这篇文章中，我们将使用两个主要的时间来源来获取洞察

视频标签的 <b>currentTime</b>，它指向视频当前所处的秒数。
视频事件的 <b>timestamp</b>，它指向事件发生的毫秒时间戳。

有了这两个时间变量，我们可以构建关于用户与视频课程基于时间交互的洞察

用户通常在何时暂停视频课程？

假设我们想监听用户在视频课程中大部分会暂停的部分。我们可以通过监听在用户暂停视频时触发的 pause 事件，并获取视频标签的 currentTime 来确定用户在视频的哪个时刻暂停了视频。

然后我们可以使用 Livewire 通过一个自定义方法，如 @this.sendPauseData()，悄悄地将此信息发送到服务器进行处理。

<!-- view -->
<script>
// ... previous listener here

video.addEventListener('pause',function(e){
    // readyState = 4 ensures true pause interaction
    if( video.readyState == 4 )
      @this.sendPauseData( video.currentTime );
});

@this.sendPauseData() 将触发一个调用我们的 Livewire 组件中的 sendPauseData() 方法的请求。我们将使用该方法将得到的 currentTime 在我们的服务器上共享，并最终记录“暂停”事件详情。

这样做让我们可以保存课程暂停的历史记录，从而为确定课程的“可能”参与度洞察提供途径：比如其平均暂停视频时刻。

/* Component */
public function sendPauseData( $videoCurrentTime ){
    // Do some processing on $videoCurrentTime
}

用户在视频课程的这个时刻暂停了多久？

鉴于我们记录的是视频暂停的不同时间点，为何不也记录用户暂停课程的时长呢？时长计算方法是：（暂停后的播放时间）减去（暂停时间）。

要获取暂停时间，我们只需使用暂停监听事件中传递的事件变量中的timeStamp。然后要获取我们的播放时间，只需从播放事件监听器获取timeStamp即可！

让我们修改暂停事件，以包括e.timeStamp值。我们还将创建一个全局变量来告诉我们视频已经被暂停——添加此变量将有助于我们在以后侦听“true”播放事件。

<!-- view -->
<script>
// ... previous listener here

+   var isPaused = true;// Our video is initially on pause
video.addEventListener('pause',function(e){
    // readyState=4 ensures true pause event interaction
+    if( video.readyState == 4 ){
+       isPaused = true;
+       @this.sendPauseData( video.currentTime, e.timeStamp );
+    }

然后在Livewire组件的方法中，我们必须将此时间戳作为公开属性$pausedAt追踪，以免丢失。

/* Component */
+ public $pausedAt;

public function sendPauseData( $videoCurrentTime, $pausedAtTimeStamp ){
+    $this->pausedAt = $pausedAtTimeStamp;
     // Do some processing on $videoCurrentTime and $pausedAtTimeStamp 
}

接下来，让我们设置我们的播放事件监听器。当用户最终在我们视图中播放视频时，我们可以简单地将当前的timeStamp发送到我们的Livewire组件。

<!-- view -->
<script>
// ... previous listeners here
var isPaused = true;
video.addEventListener('play',function(e){
    // Make sure video is prev paused
    if( isPaused ){
      isPaused = false;
      @this.sendPlayData( e.timeStamp );
    }
});

然后使用这个值来获取从先前设置的$pausedAt属性得到的时间差。

/* Component */
public function sendPlayData( $playedAtTimestamp ){ 
    if( $this->pausedAt ){
        $diff = $playedAtTimestamp - $this->pausedAt;
        // Do some processing on this new found duration, $diff
    }
}

用户通常“ asemenea”到什么时间点？

有些视频片段对用户很有帮助，可以回头再看，我们也可以对其有所了解！

同样，我们可以简单地使用currentTime来告诉我们用户将视频时间移动到哪个课程时刻。

<!-- view -->
<script>
// ... previous listeners here

video.addEventListener('seeked',function(e){
    console.log('User went to:', video.currentTime);
    @this.sendSeekedData( video.currentTime );
});

然后，在我们的Livewire组件中，使用匹配的方法进行相应的处理。

/* Component */
public function sendSeekedData( $videoCurrentTime ){
  // Record this vide time please, with a "seekedTo" type
  // to gather historical data
  // that can be basis for determining popular video timestamps!
}

捕捉时间

时间过得真快！很多时候，我们很难跟得上它——例如，我们无法阻止我们生命中岁数的积累。幸运的是，视频分析和Livewire中的时间并非如此。

在这篇文章中，我们学习了三个视频事件：pause、play和seek。通过监听这些事件，我们获得了用户通过视频标签的currentTime和视频事件的timeStamp值与我们的视频课程互动的三个“以时间为中心”的方式的数据。最后，我们展示了如何使用Livewire将客户端浏览器中的视频标签数据轻松地共享到我们的服务器。

当然，还有许多我们可以监听和测试的视频事件，如果您对此感兴趣，阅读HTMLMediaElement文档将有助于其他视频分析实现。

时间过得真快，我们往往无法明智地使用它。但是，使用Livewire将客户端浏览器中的视频事件共享到我们的服务器——这是一种时间-based的方法，可以将时间分析数据发送到我们的Laravel应用程序。🌟