HTML 5视频播放器使用emulater但不在实际设备上工作

问题描述:

好的,因此过去几天我一直试图在我的角度应用上实现视频。HTML 5视频播放器使用emulater但不在实际设备上工作

下面是对视频它自身的一些事实:

  • 所有视频都是MP4文件
  • 影片使用的流式传输节点JS
  • 使用谷歌浏览器模拟器
测试该即时通讯

现在到实际的代码:

首先在我的node.js a pplication我对获取的视频下面的代码:

router.route('/resource/:encodedString') 
    .all(function (req, res) { 
     var decoded = jwt.decode(req.params.encodedString, require('../secret')()); 
     var mediaObject = decoded.mediaObject; 

     if (mediaObject.file.extension == 'pdf') { 
      res.set('Content-Type', 'application/pdf'); 
     } else { 
      res.set('Content-Type', 'application/octet-stream'); 
     } 
     res.header('mimetype', mediaObject.file.mimetype); 
     res.header('content-disposition', 'filename=' + mediaObject.file.originalname); 


     // res.header('content-disposition', 'filename=' + mediaObject.file.originalname); 
     var stream = fs.createReadStream(mediaObject.targetDir + mediaObject.file.originalname); 
     stream.pipe(res); 
     stream.on('end', function() { 
      console.log("Reading operation completed."); 
      res.end(); 
     }); 
    }); 

Basicly的encodedString变量包含了所有的文件信息

然后在我的HTML我有以下对象:

<video width="459" height="320" controls> 
    <source src="{{LRM.getResourceUrl(resourceToken,null) | trustUrl}}" type="video/mp4"> 
    Your browser does not support the video tag. 
</video> 

LRM.getResourceUrl看起来像这样:

app.factory('LRM', function() { 
    var LRM = {}; 
    $.getJSON("config.json", function (json) { 
     LRM.env = json.app_url; // this will show the info it in firebug console 
    }); 

    LRM.getResourceUrl = function (resourceString, type) { 
     if (resourceString.indexOf('/') >= 0) { 
      //Legacy method 
      return resourceString; 
     } 
     else { 
      if(type == null){ 
       return LRM.env + '/resource/' + resourceString; 
      } 
      else 
      { 
       return LRM.env+'/resource/'+resourceString+'/'+type; 
      } 
     } 
    }; 

    LRM.getDeviceResource = function (resourceString, os) { 
     if (resourceString.indexOf('/') >= 0) { 
      //Legacy method 
      return resourceString; 
     } 
     else { 
      if(os == null){ 
       return LRM.env + '/deviceResource/' + resourceString; 
      } 
      else 
      { 
       return LRM.env+'/deviceResource/'+resourceString+'/'+os; 
      } 
     } 
    }; 

    LRM.getUploadUrl = function (method) { 
     if(LRM.env){ 
      return LRM.env + method; 
     } 
    }; 

    return LRM; 

}); 

现在,当我在桌面上运行这个我得到的电影,没有问题。

然后,当我运行这个使用模拟器和模拟或者一个iPhone 5或能正常工作藏汉

但是当我使用我的手机(实际设备)的视频不会玩的iPad和只显示我的视频播放按钮。

任何人都可以告诉我什么可能导致此?

我认为你只在iOS设备上看到这个问题?如果是这样,这可能是iOS中的浏览器在认证链接背后未回放视频的已知问题。在下面的链接中查看苹果论坛上的最新视图,尤其是从其中一个帖子中摘录的摘录(恕我直言):IMDB:

在iOS 8中,Apple推出了一个问题在Safari中,无法播放存储在HTTP基本认证后面的媒体文件。浏览器内的媒体播放器似乎没有共享浏览器的认证会话。这对我来说是一个问题,因为我一直在iPhone上使用Safari来播放我的服务器上的音乐。由于Safari不支持iOS 8,我尝试了Chrome和Opera,但他们似乎共享Safari Web视图和行为。原子没有认证问题,但是有一个单独的问题,当播放媒体时没有声音。我尝试过的唯一两款浏览器是Mercury和Dolphin。现在这些都是我去到用于播放音乐了我的服务器的替代品。”