简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
application-cache - html5 app cache的manifest缓存视频文件 移动端chrome 无法播放
ringa_lee
ringa_lee 2017-04-17 11:43:05
0
2
595

我在做一个移动端缓存视频的需要，就想到html5的离线缓存，我在pc上的chrome模拟器上测试，离线offline时，视频能正常播放，但是，用手机的测试时，第一次加载开启网络加载，然后开启手机的飞行模式，查看离线页面，视频就播放不了了。但是我查看缓存文件却有这个视频文件。

我的chrome版本是：44.0.2403.128；视频播放的插件是videojs。

以下是我的 HTML 代码：

<!DOCTYPE html>

<html manifest="cache.appcache">
<!--
<html manifest="cache.appcache" >-->
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="http://hzdo2o.oss-cn-shenzhen.aliyuncs.com/web_res/css/m.hzd.css" />
    <link href="script/video-js/video-js.min.css" rel="stylesheet">
    <script src="http://hzdo2o.oss-cn-shenzhen.aliyuncs.com/web_res/script/video-js/video1.js"></script>
    <title>好站点2</title>
    <style type="text/css">
        html, body {height:100%; width:100%;}
    </style>
    <script type="text/javascript">
        //alert('applicationCache' in window);
        // poster ./images/video-pic.jpg1
        /* */
        if ('applicationCache' in window) {
            var appCache = window.applicationCache;
            //alert(2)
            appCache.addEventListener('updateready', function () {
                appCache.swapCache();
                //if (confirm('update now!!!' + Date.now())) {
                location.reload();
                //}
            }, false)
        }

        window.addEventListener('DOMContentLoaded', function(){
            videojs.options.flash.swf = "http://hzdo2o.oss-cn-shenzhen.aliyuncs.com/web_res/script/video-js/video-js.swf";
            videojs('my_video_1').ready(function(){
                  this.play();
            });
        }, false)

    </script>
</head>
<body>
    <p class="video-wrap">
        <video autoplay id="my_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls
             preload="auto"  width="100%" height="100%"
             data-setup="{}">
             <source src="/video/video-15s.mp4" type='video/mp4'>
             <!--
              <source src="http://hzdo2o.oss-cn-shenzhen.aliyuncs.com/web_res/video/video-15s.mp4" type='video/mp4'>
             <source src="http://hzdo2o.oss-cn-shenzhen.aliyuncs.com/web_res/video/video-15s.webm" type='video/webm'>-->
        </video>
    </p>

</body>
</html>

manifest文件的配置

CACHE MANIFEST
#v2

CACHE:
http://hzdo2o.oss-cn-shenzhen.aliyuncs.com/web_res/css/m.hzd.css
/script/video-js/video-js.min.css
/script/video-js/font/vjs.ttf
/script/video-js/font/vjs.woff
http://hzdo2o.oss-cn-shenzhen.aliyuncs.com/web_res/script/video-js/video1.js
/video/video-15s.mp4

NETWORK:
*

这是调试chrome 报的错误：

我也查了很多资料，也看到很多人遇到这个问题，但，就是没找到解决方案。不知道这是不是移动 chrome 的一个bug，还是跟 video 加载视频是所采用的http 传输有关。我在调试的时候看到的http状态码是 206 Partial。

这个问题困扰我好几天了，希望遇到这个问题却有解决方案的人帮解答下。

ringa_lee
ringa_lee

ringa_lee

모든 응답(2)
洪涛
洪涛2017-04-17 11:45:05 2층

我只是猜测：
话说你这个链接的视频本身就是不能在线播放的，链接过去只能下载。是不是需要先在服务器端添加content-type支持？

좋다 +0
답글 추가
迷茫
迷茫2017-04-17 11:45:05 1층

请问题主，swf获取时候http状态码是206 Partial这个问题最后怎么解决的？也遇到相同的疑问

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！