有时候，我们需要视频播放有更好的体验，万一我们正高兴的看着视频，突然误碰刷新，或者断电。那么我们再次打开它时，他仍能准确定位到我们之前看的位置，这会让我们不必重来。
videojs就有一个很好的插件来完成此项功能而且及其简单（官网：https://github.com/Reelhouse/videojs-resume）
我们下载github的文件并解压。
在他们的同级目录下创建examples文件夹
在这个文件夹里创建example.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<html lang="en"> <head> <!--github官方网站 https://github.com/Reelhouse/videojs-resume --> <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.5.3/video-js.min.css" rel="stylesheet"> <link href="../dist/videojs-resume.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.5.3/video.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/store.js/1.3.17/store.min.js"></script> <script src="../dist/videojs-resume.min.js"></script> </head> <body> <video id="example-video" width="960" height="540" class="video-js vjs-default-skin" controls poster="http://xxxxxxxxx.com/sprice-videos/dash-hls-example-3/dash/evil-frank.jpg"> <source src="http://xxxxxxxxx.com/xialuote.mp4" type='video/mp4'> </video> <p>During playback, refresh the page to trigger VideoJS.Resume</p> <script> 'use strict'; var player = videojs('example-video'); player.Resume({ uuid: 'foobar111' }); </script> </body> </html> |
就这么简单我们就可以让他在浏览器重新打开后，显示是否继续上次的位置播放。
例如提示语和按钮的文字，或者其他配置请看：官网：https://github.com/Reelhouse/videojs-resume