0

I have an application where I present some images, videos and audios. The images works perfectly but I have problem with the audios and the videos.

Node API:

    let config = new Config(),
    client = config.Storage
    export default class ImageCtrl {
        product = (req, res, next) => {
            var params = req.params,
                point = params.filename.lastIndexOf('.'),
                nameFile = params.filename.slice(0, point),
                ext = params.filename.slice(point);
            res.writeHead(200, {
                'Cache-Control': 'no-cache'
            });
            let remote = `${nameFile}-thumb${ext}`;
            if (nameFile.includes('audio')) {
                remote = `${nameFile}${ext}`
            }
            client.download({
                container: 'Multimedia',
                remote: remote
            }, function(err, result) {
                // handle the download result
            }).pipe(res);
        }
    }

config.ts

export default class Config {
   Storage: any = pkgcloud.storage.createClient(config);
}

Angular4-HTML5

<video width="100%" *ngIf="product.mediacategory === 'video'" controls preload="none" [poster]="'/api/image/products/' + product._id + '-video.png'" controlsList="nodownload">
    <source [src]="/api/image/products/5a69b1b32e4be51cb82a7659-video.webm" type="video/webm">
    <source [src]="/api/image/products/5a69b1b32e4be51cb82a7659-video.mp4" type="video/mp4">
    <source [src]="/api/image/products/5a69b1b32e4be51cb82a7659-video.ogv'" type="video/ogv">
  </video>

For audio and image is the same API but only works in safari image. In chrome and in firefox audio, video and image works fine.

In safari it appears like this:

enter image description here

In chrome:

enter image description here

----If I remove [] of [src] it doesn't work on chrome.-----

oihi08
  • 737
  • 1
  • 6
  • 20

1 Answers1

0

Safari on iOS supports low-complexity AAC audio, MP3 audio, AIF audio, WAVE audio, and baseline profile MPEG-4 video. Safari on the desktop (Mac OS X and Windows) supports all media supported by the installed version of QuickTime, including any installed third-party codecs click here for reference

Padma Rubhan
  • 293
  • 3
  • 16
  • I try this options and it works with for example this URL http://techslides.com/demos/sample-videos/small.mp4 but with my node URL not – oihi08 Feb 09 '18 at 09:28
  • remove square bracket form src. like this src="/api/image/products/5a69b1b32e4be51cb82a7659-video.webm". if you give [src] means, you have to mention the variable – Padma Rubhan Feb 09 '18 at 10:27
  • did you check the output with inspect, is there any error in console ?? or else the link of the video is correct or not.?? – Padma Rubhan Feb 09 '18 at 13:04
  • I haven't got error, only when I click on "play button" Unhandled Promise Rejection: [object DOMError] – oihi08 Feb 09 '18 at 13:14
  • https://stackoverflow.com/questions/45311263/mediastream-unhandled-promise-rejection-object-domerror-in-safari-11 I think this answer will help you.. – Padma Rubhan Feb 12 '18 at 09:25