I am working to develop a desktop application for PC using node-webkit. When I run the app with node-webkit everything works great with the exception of the mp4 videos. The html 5 video box pops up, but it is pure white and the controls are grayed-out in the same way it does if I provide a bad file path and run the app in chrome. An example piece of my index.html file:
<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="c" data-tolerance="15,15" class="ui-content">
<video width="497" height="298" style="max-width:100%;" controls>
<source src="base/tutorialvideos//General_Tutorial.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="ui-btn ui-btn-right">
Tutorial
</div>
I double-checked the file path several times, and tried all combinations of /, //, \, \ just to be sure. I tried using the full file path instead of the relative with the same results.
I then used a format converter to change one of the videos from .mp4 to .ogv with the same results.
What is really curious, is that I am pretty sure that it IS seeing the videos, because with the code as is posted above, the controls are semi-responsive. I can toggle between play and pause and drag the slider. When I drag the slider to the end, it shows the exact run-time of the video, but still no audio or video.
It just occured to me that jquery mobile could be messing it up, so I'll post this and run a test with pure html 5.
Thanks is advance for any info.
node-webkit only supports patent "free" codecs out of the box. You can however enable mp4/h264 support which is described here: Using MP3 & MP4 (H.264) using the video & audio tags..
Related
I'm building a website with php that echos the following html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="video_media" style="position:relative; z-index:1; display:block; margin-left:auto; margin-right:auto; width:700px;" controls>
<source src="uploads/15 dialogo 13.mp4" type='video/mp4'>
</video>
</body>
</html>
When I view the page in google chrome there is only a set of controls. The audio plays if I press play, but the video does not show in google chrome. In safari and microsoft edge the video will show up and play fine with the controls.
I didn't tag php in this because when I make an html file with this code the same thing happens, so I'm fairly sure its not an issue with the php.
I've googled this a lot in the last couple days and I haven't been able to find anything about other people having the same problem. I've changed settings on chrome on my computer to try to view the video but that hasn't done anything. I also don't think that it's a chrome settings issue since I've never noticed other sites' videos not playing on my browser.
If there's an obvious answer that I'm missing, sorry... I'm fairly new to web design and I've never used videos on a web page before. If there is another question that has been asked that has the same answer, also, sorry. I did search here first, but I might have missed it. Please just point me to that page. Thanks,
------------UPDATE------------
It doesn't work on firefox either by the way.
Also, I can download the file with audio and video working after download. It's just not playing in the browser.
Can you try with:
<source src="./uploads/15 dialogo 13.mp4" type='video/mp4'>
or meaby changing the name of the video:
<source src="./uploads/test.mp4" type='video/mp4'>
--UPDATE--
Apparently the problem is generated by video codecs
I have one mp4 video that won't play in Chrome or Firefox. The audio plays, with the controls, but no video. What fixed it was pulling the video into Final Cut Pro, which said that it was a non-standard size or format, then I "shared" (exported) the file back onto my hard drive. The new file plays in all the browsers. The file size jumped from 32 MB to 98 MB, for a three-minute SD video.
I built a very simple personal website and hosted it through FTP.
In the site, I have 2 videos I would like to play. Using the video control class in HTML, I put the video onto the site. Locally, my video plays fine. However, the moment I upload my website online, the videos stop working. I have double checked that my code is identical and the two videos are in my website.
Here is my code for the video control class.
<div class="musicVidSub" id="musicSub3">
<video controls class="musicVid" id="musicVid5">
<source src="images/flute5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="musicDes" id="musicDesVid">
Description
</div>
</div>
If you want to check out the situation yourself, the site is ericamwang.com
If anyone could help me figure out why, that would be very helpful. Thank you in advance!
The folder on your website is spelled with a capital I. You must use
<source src="Images/flute5.mp4" type="video/mp4">
Windows does not differentiate between lowercase and uppercase letters in the file system, but Unix/Linux does. That's why it works on your local computer, but not on the web server.
I am trying to embed a video in my html page but it is not loading on the iPhone (all I get is a crossed out play button). It loads fine on the desktop and Android. It is not a browser issue because I get the same error using both Chrome and Safari on my iPhone.
<div id="video_container">
<video width="400" height="400" controls preload="none" poster="/static/img/tag_logo.png">
<source src="/static/videos/movie.mp4" type="video/mp4"></source>
</video>
</div>
Interestingly I have tested out my code with the video from the video.js sample project. If I replace my current source tag with this the video loads:
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4"></source>
However, I also downloaded the video from the video.js site, but it does not load on my iPhone
<source src="/static/videos/oceans-clip.mp4" type="video/mp4></source>
Codecs for the videos I am trying out all have AAC and H.264 codecs and are mp4s
I have also tried converting my video files to iPhone ready mp4 files using Miro Video Converter but still no luck with loading on the webpage
I am testing on localhost and am using nginx and flask
After more testing: according to the Chrome inspector I am getting response headers back for my video url GET request which explains why it plays on the desktop web. However, for iPhone, the Safari inspector says that I am not getting response headers back. And on Android, I do not get response headers back either, but for some reason the video is still able to play in the webpage on my Android device.
Any help would be appreciated
It could be your host server setup. For example when I use Go Daddy, SVG files won't display on my site. You can either check out the config or add a file that allows the MIME type. More on MIME types here: http://blogs.iis.net/bills/archive/2008/03/25/how-to-add-mime-types-with-iis7-web-config.aspx
Just change the video extension to .mov.
I'm pulling my hair here trying to figure out why Safari (v6) won't play .mov files.
This is my setup, simplified -
<video width="800" height="450" controls="controls" preload="none">
<source src="example.mov" type="video/mp4" />
Your browser can't play this video.
</video>
What I'm trying to achieve is uploading movie clips to a WordPress blog from an iPhone. iPhone saves video in .mov with h264 encoding (correct?). It would be too much of a hassle for the client to render other formats as well when uploading, and we decided to settle with this format.
In Chrome, I can see this video but in Safari it won't play, even when accessing the file directly. The player simply displays its UI bar with a loading statement. I get no errors.I've also made sure to set the .htaccess file to include AddType for .mov / quicktime.What could I possibly be missing?
Could you please put this example online? Be good to examine this example.mov with ffprobe.
IOS Safari seems very sensitive how MP4s are encoded. Only thing I've found that works for me is the libx264-ipod640.ffpreset with ffmpeg. See https://github.com/kaihendry/recordmydesktop2.0 for more.
I am trying to play a video in safari 5 but its just showing me a blue question mark button, no video place holder no video controls (like in chrome)
<video poster='your_pic.jpg' controls="">
<source width='480' height='360' src='/videos/my file to play.m4v' />
</video>
For safari to play videos on windows you have to install apple quick time.
http://www.agilepman.com/2010/09/how-to-make-html5-video-tag-work-in-safari-on-windows/
I'm not familiar with the syntax you have used, i.e. a source tag within the video tag. I would expect a video reference to look more like this:
<video controls="true" poster="some-image.png" src="some-video.mp4"></video>
Does the video work as expected in Chrome? Looking at the controls that do get rendered, the difference between Chrome and Safari seems to be down to embedded Quicktime (i.e. Safari uses it if it can, Chrome does not).
One other thing: if the file just doesn't play anywhere, bear in mind that .m4v files are often MPEG4 files with Apple's Fairplay DRM applied to them (although they don't have to be).