search

angular-fullstack / generator-angular-fullstack

Yeoman generator for an Angular app with an Express server
https://awk34.gitbook.io/generator-angular-fullstack
6.12k stars 1.24k forks source link

html5 videos not playing on ipad and iphone after uploading to Openshift #834

Closed jesben closed 9 years ago

jesben commented 9 years ago

First I added my folder "videos" under assets to the gruntfile. On my local PC, I can run “grunt serve:dist” and see my videos in Chrome, IE and Firefox and if I connect to my PC from my Ipad and Iphone, I can also see my videos. But when I deploy it to Openshift “grunt buildcontrol:openshift” I can only see the videos in Chrome, IE and Firefox and on my Ipad and Iphone I cannot!? (cross over the play button)

It must be something with the webserver, external sources works. Maybe security, mimetypes I dont know, it stranges it works locally on every browser/device. I have tried a lot of diffrent ways to write the video tag, but nothing helps...

<!-- After upload to Openshift it only works Chrome, IE and Firefox -->
<video controls="true" width="640" height="240" src="assets/videos/oceans-clip.mp4">
  <source src="assets/videos/oceans-clip.mp4" type="video/mp4">
  <source src="assets/videos/oceans-clip.webm" type="video/webm">
  <source src="assets/videos/oceans-clip.ogv" type="video/ogv">
</video>

<!-- External source: After upload to Openshift it works in Chrome, IE, Firefox and on my Ipad and Iphone -->
<video controls="true" width="640" height="240" src="http://video-js.zencoder.com/oceans-clip.mp4">
  <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4">
  <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm">
  <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogv">
</video>
jordanbaucke commented 9 years ago

@jesben as someone who has worked with this generator and html5 videos, I don't think your issue is with the generator - but your right something with the way assets are served out of openshift - I typically upload my media content to s3 and serve it remotely in this situation anyways.

jesben commented 9 years ago

@jordanbaucke thank you so much for the answer, I really appreciate. You right is not the generator, it must be Openshift. I will close this issue. I will go the same way as you using AWS S3. Is there any chance I can ask you about tips/guide to implement S3 in angular-fullstack, need to secure video files, only for members?

jordanbaucke commented 9 years ago

@jesben there are a few ways to go about it, since html5 video's basically are exposed directly to the user (and downloaded for rendering), and you can't implement a by-user authentication policy on S3 (except public/aws-account-private) the first step would be too put your video content inside of a page that required authentication to render, the authentication mechanism in the generator should work for this. If you want to go more indepth (I've used RTMP streaming / VOD) before there are more options for securing the content against being downloaded. drop me a line jordan dot baucke at gmail dot com and we can chat some more if you like.