video.js - 记住视频在 VideoJS 中暂停的位置的功能
问题描述
我想知道如何向 VideoJs 添加一个使用 localStorage 方法记住视频暂停点的函数,以存储播放计时器,因此如果用户关闭或刷新页面并返回播放器,则视频播放返回之前暂停的位置,并出现一条消息,询问它是要恢复视频还是返回到停止的位置。
我尝试使用这个插件,但它不再在当前版本的 videojs 中工作。
下面是我在 VideoJS 中使用的代码
<link href="./players/src/video-js.min.css" rel="stylesheet">
<!-- libjass-->
<link href="./players/src/libjass.css" rel="stylesheet">
<script src="./players/src/libjass.js"></script>
<!-- src -->
<link href="./players/src/videojs.ass.css" rel="stylesheet">
<script src="./players/src/videojs.ass.js"></script>
<!-- modo resolution switcher -->
<link href="./players/src/videojs-resolution-switcher.css" rel="stylesheet">
<script src="./players/src/videojs-resolution-switcher.js"></script>
<!-- modo seek-buttons -->
<link rel="stylesheet" href="./players/src/videojs-seek-buttons.css">
<script src="./players/src/videojs-seek-buttons.min.js"></script>
<!-- modulo jquaery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- modo videoJS m3u8 -->
<script src="./players/src/hls.min.js?v=v0.9.1"></script>
<!-- https://github.com/video-dev/hls.js -->
<script src="./players/src/videojs5-hlsjs-source-handler.min.js?v=0.3.1"></script>
<!-- https://github.com/streamroot/videojs-hlsjs-plugin -->
<script src="./players/src/vjs-quality-picker.js?v=v0.0.2"></script>
<video id="player" class="embed-responsive-item video-js vjs-default-skin vjs-big-play-centered" poster="url imagem"></video>
<script type="text/javascript">
videojs('player', {
controls: true,
nativeControlsForTouch: false,
fluid: true,
width: 1920,
height: 1080,
plugins: {
seekButtons: {
'back': 10,
'forward': 10,
},
},
},
);
var vjs = videojs('player');
// inicializa o plugin de ass
var vjs_ass = vjs.ass({
'src': ["url ass"],
label: "ptbr",
'delay': -0.1,
// enableSvg: false
});
(function ($) {
$(document).ready(function () {
// Modulo de seleção de resolução hls
videojs('player').ready(function () {
var myPlayer = this;
myPlayer.qualityPickerPlugin();
myPlayer.src({type: 'application/x-mpegURL', src: 'url m3u8'});
});
});
})(jQuery);
</script>
解决方案
推荐阅读
- google-cloud-platform - GCP CDN 不缓存数据
- angular - Angular 路由授权和安全性
- mysql - 事务何时删除mysql中的数据
- php - 我对产品评论摘要栏 WooCommerce 有疑问
- php - PHP Curl 从浏览器中的 URL 返回不同的结果
- tensorflow - 如何将 Keras 内置的多类分类神经网络导出到 PMML
- javascript - 如何在不刷新 php 页面的情况下跟踪 mysql 数据库中的更改?
- r - 将误差线添加到 R 中的水平条形图
- sql - 在 SSIS 中处理数据
- delay - 系统延迟功能没有产生正确的时序