MENU

【笔记】音视频记忆播放(cookie储存播放时长)

2021 年 01 月 25 日 • 阅读: 838 • 笔记

前些天一个群友非要让我帮他整,可我还没学 Javascript,昨天学 Javascript 的时候整明白了,就记录下。


  • 获取对应标签播放器音播放时长(以视频为例),代码放在 head 标签中
<script type="text/javascript">
        function get_current_time() {
            window.setTimeout("get_current_time()",1);
            myVid = document.getElementById("video");
        }
        get_current_time();
    </script>
  • 设置 cookie ,代码放在 head 标签中
<script type="text/javascript">
        function set_cookie_time(){
            window.setTimeout("set_cookie_time()",1);
            document.cookie = "myVid_Time="+myVid.currentTime;
        }
        set_cookie_time();
    </script>
  • 读取 cookie 并在页面打开时设置视频播放时间为 cookie 中的值,代码放在 head 标签中
<script type="text/javascript">
        var cookie_str = document.cookie.split(";")[0];
        cookie_time = cookie_str.substring(11,999);
        window.setTimeout("carry_cookie_time()",0);
        function carry_cookie_time(){
            myVid.currentTime = cookie_time;
        }
        carry_cookie_time();
    </script>

全部代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <script type="text/javascript">
        function get_current_time() {
            window.setTimeout("get_current_time()",1);
            myVid = document.getElementById("video");
        }
        get_current_time();
    </script>
    <script type="text/javascript">
        function set_cookie_time(){
            window.setTimeout("set_cookie_time()",1);
            document.cookie = "myVid_Time="+myVid.currentTime;
        }
        set_cookie_time();
    </script>
    <script type="text/javascript">
        var cookie_str = document.cookie.split(";")[0];
        cookie_time = cookie_str.substring(11,999);
        window.setTimeout("carry_cookie_time()",0);
        function carry_cookie_time(){
            myVid.currentTime = cookie_time;
        }
        carry_cookie_time();
    </script>
</head>
<body>

<br />
<video id="video" controls="controls" height="600px" width="860px">
    <source src="https://www.w3school.com.cn//example/html5/mov_bbb.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>
<br/>
<script type="text/javascript">
    document.writeln("从cookie中取出的上次播放最后时间是:"+cookie_time);
</script>
</body>
</html>

就这了。。

演示:

最后编辑于: 2021 年 03 月 05 日
返回文章列表 文章二维码
本页链接的二维码
打赏二维码