Unhandled Promise Rejection: [object DOMError]


(Alex) #1

Hello @jonathan @Daniel

when click play on the video, it shows:

[Error] Unhandled Promise Rejection: [object DOMError]
(anonymous function)
rejectPromise

Screenshot here:


and here is my setting in Hype:

This test project is upload to sever by FTP, and screenshot:

Project url : https://lovcour.com/lovcourecodev/lovcourecodev.html

The video play well in Chrome and Firefox, but it does not play in Safari.

How to fix this error please?

Alex


#2

When I play that video in Safari, it shows a / over the play button, which usual has something to do with Mime types. Our server shows a mime-type / content-type of: content-type: video/mp4 for that video (and it plays), so I recommend ensuring that files with the extension .m4v are served with the content-type of video/mp4 on your server.

You can test what content type is being served by typing:

curl -I https://lovcour.com/lovcourecodev/lovcourecodev.hyperesources/美到没有偏见%201.m4v in terminal. For that file, I get:

This htaccess file has a line in it (46) which would set the mime type correctly: https://github.com/h5bp/server-configs-nginx/blob/master/mime.types

Chrome and Firefox are likely disregarding the mime type and doing their best, whereas Safari is being more strict.


(Alex) #3

Ok, thanks, I will test, do you mean the screenshot show the sever does not support this video?

I am using niginx, should I input that confirms lines into our nginx config please?

Alex


#4

The content-type is set as video/x-m4v and I don’t think Safari knows what to do what that. It prefers video/mp4 for that.

That file appears to be here: /etc/nginx/mime.types but I’m not familiar with this. Check out: https://stackoverflow.com/a/19630564


(Alex) #5

@Daniel,

For test purpose, I upload a new Hype project in which I embed a sample video, which is downloaded from a video Pro site, and guarantee the video format is mp4.

unfortunately, it still only not work in Safari:

Here is the page: https://lovcour.com/testvideo/testvideo.html

Here are some steps:

1# what I checked by:

curl -I https://lovcour.com/testvideo/testvideo.hyperesources/mp4_video.mp4

Show:

root@lovcour:~# curl -I https://lovcour.com/testvideo/testvideo.hyperesources/mp4_video.mp4
HTTP/1.1 200 OK
Server: nginx
Date: Wed, 09 May 2018 15:30:38 GMT
Content-Type: video/mp4
Connection: keep-alive
ETag: "5af3132b-4fde13"
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Access-Control-Allow-Origin: *

root@lovcour:~#


2# Also, I check what type of mime support on our wordpress by using this plugin: Mime Types Plus(https://wordpress.org/plugins/mime-types-plus/)

and I found it support both mp4 and m4v, here is screenshot: http://prntscr.com/jfqnk9

3~# /usr/sbin/nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

4.~# cat /etc/nginx/nginx.conf
user www-data;
worker_processes auto;
worker_rlimit_nofile 100000;
pid /run/nginx.pid;

events {
worker_connections 4096;
multi_accept on;
}

http {
##
# EasyEngine Settings
##

sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 30;
types_hash_max_size 2048;

server_tokens off;
reset_timedout_connection on;
add_header X-Powered-By "EasyEngine 3.7.4";
add_header rt-Fastcgi-Cache $upstream_cache_status;

# Limit Request
limit_req_status 403;
limit_req_zone $binary_remote_addr zone=one:10m rate=1r/s;

# Proxy Settings
# set_real_ip_from	proxy-server-ip;
# real_ip_header	X-Forwarded-For;

fastcgi_read_timeout 300;
client_max_body_size 100m;

##
# SSL Settings
##

ssl_session_cache shared:SSL:20m;
ssl_session_timeout 10m;
ssl_prefer_server_ciphers on;
ssl_ciphers 

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

##
# Basic Settings
##
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;

**_include /etc/nginx/mime.types;_**
default_type application/octet-stream;

##
# Logging Settings
##

access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;

# Log format Settings
log_format rt_cache '$remote_addr $upstream_response_time $upstream_cache_status [$time_local] '
'$http_host "$request" $status $body_bytes_sent '
'"$http_referer" "$http_user_agent"';

##
# Gzip Settings
##

gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types
    application/atom+xml
    application/javascript
    application/json
    application/rss+xml
    application/vnd.ms-fontobject
    application/x-font-ttf
    application/x-web-app-manifest+json
    application/xhtml+xml
    application/xml
    font/opentype
    image/svg+xml
    image/x-icon
    text/css
    text/plain
    text/x-component
    text/xml
    text/javascript;

##
# Virtual Host Configs
##

include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;

}

#mail {

# See sample authentication script at:

# http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript

# auth_http localhost/auth.php;

# pop3_capabilities “TOP” “USER”;

# imap_capabilities “IMAP4rev1” “UIDPLUS”;

server {

listen localhost:110;

protocol pop3;

proxy on;

}

server {

listen localhost:143;

protocol imap;

proxy on;

}

#}

5.# cat /etc/nginx/mime.types

types {
text/html html htm shtml;
text/css css;
text/xml xml;
image/gif gif;
image/jpeg jpeg jpg;
application/javascript js;
application/atom+xml atom;
application/rss+xml rss;

text/mathml                           mml;
text/plain                            txt;
text/vnd.sun.j2me.app-descriptor      jad;
text/vnd.wap.wml                      wml;
text/x-component                      htc;

image/png                             png;
image/tiff                            tif tiff;
image/vnd.wap.wbmp                    wbmp;
image/x-icon                          ico;
image/x-jng                           jng;
image/x-ms-bmp                        bmp;
image/svg+xml                         svg svgz;
image/webp                            webp;

application/font-woff                 woff;
application/java-archive              jar war ear;
application/json                      json;
application/mac-binhex40              hqx;
application/msword                    doc;
application/pdf                       pdf;
application/postscript                ps eps ai;
application/rtf                       rtf;
application/vnd.apple.mpegurl         m3u8;
application/vnd.ms-excel              xls;
application/vnd.ms-fontobject         eot;
application/vnd.ms-powerpoint         ppt;
application/vnd.wap.wmlc              wmlc;
application/vnd.google-earth.kml+xml  kml;
application/vnd.google-earth.kmz      kmz;
application/x-7z-compressed           7z;
application/x-cocoa                   cco;
application/x-java-archive-diff       jardiff;
application/x-java-jnlp-file          jnlp;
application/x-makeself                run;
application/x-perl                    pl pm;
application/x-pilot                   prc pdb;
application/x-rar-compressed          rar;
application/x-redhat-package-manager  rpm;
application/x-sea                     sea;
application/x-shockwave-flash         swf;
application/x-stuffit                 sit;
application/x-tcl                     tcl tk;
application/x-x509-ca-cert            der pem crt;
application/x-xpinstall               xpi;
application/xhtml+xml                 xhtml;
application/xspf+xml                  xspf;
application/zip                       zip;

application/octet-stream              bin exe dll;
application/octet-stream              deb;
application/octet-stream              dmg;
application/octet-stream              iso img;
application/octet-stream              msi msp msm;

application/vnd.openxmlformats-officedocument.wordprocessingml.document    docx;
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet          xlsx;
application/vnd.openxmlformats-officedocument.presentationml.presentation  pptx;

audio/midi                            mid midi kar;
audio/mpeg                            mp3;
audio/ogg                             ogg;
audio/x-m4a                           m4a;
audio/x-realaudio                     ra;

video/3gpp                            3gpp 3gp;
video/mp2t                            ts;
video/mp4                             mp4;
video/mpeg                            mpeg mpg;
video/quicktime                       mov;
video/webm                            webm;
video/x-flv                           flv;
video/x-m4v                           m4v;
video/x-mng                           mng;
video/x-ms-asf                        asx asf;
video/x-ms-wmv                        wmv;
video/x-msvideo                       avi;

}

obviously, the video format is already included in mime type.

Any further more instruction would be appreciated.

Alex


#6

This video does not play for me in any major browser (Safari, Chrome, Firefox, Opera - latest versions).

Firefox: “No video with supported format and MIME type found”.


(Alex) #7

@JimScott

do you mean this one please?


#9

"https://lovcour.com/testvideo/testvideo.hyperesources/mp4_video.mp4"
worked in Chrome & Firefox.

However the URL in your first post did not work with any browser (as per my previous post):
https://lovcour.com/lovcourecodev/lovcourecodev.html


(Hans-Gerd Claßen) #10

404 :slight_smile:


(Alex) #11

sorry, I temporarily move it for test, and you can test now, and I just suppose same issue.

https://lovcour.com/lovcourecodev/lovcourecodev.hyperesources/美到没有偏见%201.m4v


(Alex) #12

Hello,

I updated mime.type exactly same with the one at: https://github.com/h5bp/server-configs-nginx/blob/master/mime.types

but still not play in safari.

cat /etc/nginx/mime.types

types {

Data interchange

application/atom+xml                  atom;
application/json                      json map topojson;
application/ld+json                   jsonld;
application/rss+xml                   rss;
application/vnd.geo+json              geojson;
application/xml                       rdf xml;

JavaScript

# Normalize to standard type.
# https://tools.ietf.org/html/rfc4329#section-7.2
application/javascript                js;

Manifest files

application/manifest+json             webmanifest;
application/x-web-app-manifest+json   webapp;
text/cache-manifest                   appcache;

Media files

audio/midi                            mid midi kar;
audio/mp4                             aac f4a f4b m4a;
audio/mpeg                            mp3;
audio/ogg                             oga ogg opus;
audio/x-realaudio                     ra;
audio/x-wav                           wav;
image/bmp                             bmp;
image/gif                             gif;
image/jpeg                            jpeg jpg;
image/jxr                             jxr hdp wdp;
image/png                             png;
image/svg+xml                         svg svgz;
image/tiff                            tif tiff;
image/vnd.wap.wbmp                    wbmp;
image/webp                            webp;
image/x-jng                           jng;
video/3gpp                            3gp 3gpp;
video/mp4                             f4p f4v m4v mp4;
video/mpeg                            mpeg mpg;
video/ogg                             ogv;
video/quicktime                       mov;
video/webm                            webm;
video/x-flv                           flv;
video/x-mng                           mng;
video/x-ms-asf                        asf asx;
video/x-ms-wmv                        wmv;
video/x-msvideo                       avi;

# Serving `.ico` image files with a different media type
# prevents Internet Explorer from displaying then as images:
# https://github.com/h5bp/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee

image/x-icon                          cur ico;

Microsoft Office

application/msword                                                         doc;
application/vnd.ms-excel                                                   xls;
application/vnd.ms-powerpoint                                              ppt;
application/vnd.openxmlformats-officedocument.wordprocessingml.document    docx;
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet          xlsx;
application/vnd.openxmlformats-officedocument.presentationml.presentation  pptx;

Web fonts

application/font-woff                 woff;
application/font-woff2                woff2;
application/vnd.ms-fontobject         eot;

# Browsers usually ignore the font media types and simply sniff
# the bytes to figure out the font type.
# https://mimesniff.spec.whatwg.org/#matching-a-font-type-pattern
#
# However, Blink and WebKit based browsers will show a warning
# in the console if the following font types are served with any
# other media types.

application/x-font-ttf                ttc ttf;
font/opentype                         otf;

Other

application/java-archive              ear jar war;
application/mac-binhex40              hqx;
application/octet-stream              bin deb dll dmg exe img iso msi msm msp safariextz;
application/pdf                       pdf;
application/postscript                ai eps ps;
application/rtf                       rtf;
application/vnd.google-earth.kml+xml  kml;
application/vnd.google-earth.kmz      kmz;
application/vnd.wap.wmlc              wmlc;
application/x-7z-compressed           7z;
application/x-bb-appworld             bbaw;
application/x-bittorrent              torrent;
application/x-chrome-extension        crx;
application/x-cocoa                   cco;
application/x-java-archive-diff       jardiff;
application/x-java-jnlp-file          jnlp;
application/x-makeself                run;
application/x-opera-extension         oex;
application/x-perl                    pl pm;
application/x-pilot                   pdb prc;
application/x-rar-compressed          rar;
application/x-redhat-package-manager  rpm;
application/x-sea                     sea;
application/x-shockwave-flash         swf;
application/x-stuffit                 sit;
application/x-tcl                     tcl tk;
application/x-x509-ca-cert            crt der pem;
application/x-xpinstall               xpi;
application/xhtml+xml                 xhtml;
application/xslt+xml                  xsl;
application/zip                       zip;
text/css                              css;
text/csv                              csv;
text/html                             htm html shtml;
text/markdown                         md;
text/mathml                           mml;
text/plain                            txt;
text/vcard                            vcard vcf;
text/vnd.rim.location.xloc            xloc;
text/vnd.sun.j2me.app-descriptor      jad;
text/vnd.wap.wml                      wml;
text/vtt                              vtt;
text/x-component                      htc;

}


(Mark Hunte) #13

I wonder if this is related to these issues questioned on Stackoverflow…

Which looks like Safari is expecting a stream from the server but if indeed you server is a blob server then it is not sending a stream so safari does not get the responsse it is looking for.


(Alex) #14

Hi Mark,

Thanks. I check that, that seems alternative way, but also means lots of work to setup anther environment.

does that mean only Streaming video playing support Safari?

If so, I am quite confused why these video play well with Safari in non-ssl server,…:grin:I mean these video play well in Safari too before SSL setup on our site.

Thanks.

Alex


(Mark Hunte) #15

Sorry I may be misleading you there… I got

Failed to https://lovcour.com/testvideo/testvideo.hyperesources/mp4_video.mp4 load resource: Plug-in handled load

In Safari, which is why I posted the above, but that maybe a red herring as I just drop a local mp4 on to safari and got the same error… but it played.

I downloaded yours and that plays also but gives me the error I mention so please ignore my last post.


(Alex) #16

Thanks.

I never try locally play video in Safari, GREAT way to test👍


(Alex) #17

Hi @Daniel @h_classen @JimScott
Thanks all,

And I happily to let you know the video play issue was resolved by migrating site from HHVM to php7.