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
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.
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
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: http headers - Force nginx to send specific Content-Type - Stack Overflow
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 {
#}
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
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".
"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”
404 
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
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.
types {
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;
# Normalize to standard type.
# https://tools.ietf.org/html/rfc4329#section-7.2
application/javascript js;
application/manifest+json webmanifest;
application/x-web-app-manifest+json webapp;
text/cache-manifest appcache;
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;
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;
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;
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;
}
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.
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,…
I mean these video play well in Safari too before SSL setup on our site.
Thanks.
Alex
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.
Thanks.
I never try locally play video in Safari, GREAT way to test👍
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.