js H5 video如何在关闭页面后记住播放位置,下次进入直接从该位置开始播放

代码如下,localStorage里的currentTime可以拿到,但是点击播放还是从头开始啊

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
        <video id="myvideo" width="100%" height="100%" controls="controls" poster="img/cars.png">
            <source src="cars.mp4" type="video/mp4"></source>
        </video>
    <script type="text/javascript">
        var video = document.getElementById('myvideo');
        
        var currentTime = localStorage.getItem("currentTime");
        console.log(currentTime);
        video.addEventListener("loadedmetadata",function(){
            this.currentTime = currentTime;
        });
        
        video.addEventListener("timeupdate",function(){
            var currentTime = Math.floor(video.currentTime);
            localStorage.setItem("currentTime",currentTime);
            console.log(localStorage.getItem("currentTime"));
        });
    </script>
    </body>
</html>

想做成类似https://po.baidu.com/feed/video?context=%7B%22internal_url%22%3A%22http%253A%252F%252Fwww.internal.video.baidu.com%252F61465f8e083224e8618715343e8e508b.html%22%2C%22sourceFrom%22%3A%22trans%22%7D这种的

阅读 11.8k
8 个回答

就是用的currentTime 原因是我在HBuilder的服务上运行是不行的,要部署到自己的服务器或者直接文件中用chrome打开就行了

应该点击播放按钮的时候才设置

可以试试本地存储,localstorage 试试,在关闭的时候存储,在进入页面的时候读区存储的信息,然后根据信息操作video

clipboard.png

if(判断localstorage里面的currtime == 有){
    video.currentTime == localstorage里面的currtime
}


更新于 2018年1月30日14:04:11
下面的回复没法放图片。很尴尬,就放这里吧

旧图片来自于这个http://www.w3school.com.cn 网址
当然,我建议你以MDN为主 https://developer.mozilla.org...
clipboard.png

我将MP4视频放到我的公网服务器上,然后本地的html的src放服务器视频的http地址

video.currentTime就可以用了

范例

<source src="https://www.xxxx.com/xxxx.mp4"   type="video/mp4">

使用<source src="cars.mp4" type="video/mp4"></source>怎么点击都是回到开始的

localstorage应该算一种,还有可以通过query存储,youtube就是这么做的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题