How do I open an MP4 file when I don't have a dedicated application? Can I do it with computer code? Is there another way with applications already on Windows?
Yes, there are a few different ways to do it, including writing some HTML5. I have prepared a bit of code which does the job:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MPlayer Online Media Player</title>
<meta name="description" content="MPlayer Online Media Player">
<meta name="author" content="Peter David Carter">
</head>
<body>
<video width="640" height="480" controls>
<source src="pre-baptism.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
and uploaded it here: MPlayer Media Player
as well as a high-res version here: MPlayer Media Player Hi-Res
to demonstrate, though it may depend what codecs your browser/OS has installed whether you are able to play the video.
Failing that, there are pre-written code solutions in place on Google Drive which do a similar thing. I have uploaded the video there for reference as the Google implementation seems to work reliably across a wider range of systems, regardless of MIME type etc.
Google Video Player
Related
In Firefox 53 on macOS, a simple video autoplay attribute isn't working. No problem in any other browser, on macOS or Windows 10. The page code couldn't be simpler:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Video Autoplay</title>
</head>
<body>
<h1>HTML5 Video<br>This should autoplay in all browsers</h1>
<video src='../media/wildlife.mp4' width='640' height='360' controls poster='../media/wildlife.jpg' autoplay></video>
</body>
</html>
Anyone have any idea what the issue is? To be clear, I'm not talking about iOS or Android - this is a laptop/desktop issue only.
It seems that I had done some tinkering in about:config, which disabled the video autoplay. A "refresh" of Firefox cured the problem.
User error. ;)
im making hybrid app only for android, and designer gave me 480px(minimum size) layout.
i declared meta view port like this...
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densitydpi=high-dpi " />
also the my css is
body {min-width:480px; height:100%;}
the problem is when i test on my phone, almost every browser shows perfectly! But Except Mobile Chrome Browser. it shows layout bigger and overflow on the screen...
what did i have wrong ?
To my understanding, Android devices don't use the viewport. iOS devices do. You CSS is actually taking over. So depending on your device's initial width, smaller than 480px, your layout will overflow because of the min-width. Your best bet might be to use the min-width:320px and width:100%.
Try that.
What do you mean by the "mobile Chrome browser". You mean the native browser that comes predownloaded on the phone or the Chrome browser you download from the Play Store?
I am hoping someone has an idea on what I can do to help me play HTML5 videos on my local intranet.
My Web server= Windows Server 2008 R2 Standard 64bit
IIS version= IIS7
Test User environment = Windows 7 Enterprise
Video plays perfectly using 'Google Chrome'
Video fails to play using 'IE10'
My html code is as follows:
<!DOCTYPE html>
<html>
<body>
<video src="AccReadings.mp4" width="400" height="300" preload controls>
</video>
</body>
</html>
My test machine using IE10 does play HTML5Rocks video 'http://craftymind.com/factory/html5video/CanvasVideo.html'
Regards,
Chris
Make sure you set the web server to use a MIME type video/mp4 for .mp4. I accidentally set .mp4 to use MIME type video/mpeg, the video plays in Chrome, but not in IE11.
Also you need to make sure the video uses H264 video codec and AAC audio codec
I just had a similar problem, my own site HTML5 did not work at all. No error message just blank.
The reason was Windows7 N (EU - no media player).
After installing the Windows Media Player, this (and also other problems) are fixed.
I hope it helps :)
It doesn't look like it works in Win7+IE10 for some reason. Everything else looks good. Tested against the following pages, which includes ie.microsoft.com test.
http://ie.microsoft.com/testdrive/graphics/videoformatsupport/default.html
http://www.w3.org/2010/05/video/mediaevents.html
Win7 IE9 – OK
Win7 IE10 – nope
Win8 IE10 – OK
Win7 IE11 – OK
Win8 IE11 – OK
BrowserStack screenshots for the MS test page.
http://www.browserstack.com/screenshots/9083c865675d0821ee8b1030a43da5fd36bff469
I don't have IE10 installed, however, according to caniuseit, mp4 is supported in IE9 and 10.
The following html works for me in IE9 & Chrome, note your video file must be in the same folder as your html page on the server (in this example).
<!DOCTYPE html>
<html>
<body>
<video src="abc.mp4" width="640" height="480" preload controls></video>
</body>
</html>
Edit: I have installed IE10 and can confirm the above works there too.
Edit: Since Firefox does not support mp4, and older browsers do not support video natively at all, it is better to provide multiple sources (formats), and fall back, usually to a flash player.
<!DOCTYPE html>
<html>
<body>
<video width="640" height="480" preload controls>
<!-- mp4 supported by Chrome & IE9/10 -->
<source src="abc.mp4" type="video/mp4"></source>
<!-- webm supported by Firefox -->
<source src="abc.webm" type="video/webm"></source>
<!-- last element in video is fall back for native video support, usually a flash player -->
<object type="application/x-shockwave-flash ...>
<!-- last element flash player is usual fall back for flash support, usually some "not supported text" -->
<div>
Your browser does not natively support flash and you do not have flast installed.
</div>
</object>
</video>
</body>
</html>
Maybe you have video card driver problem as mentioned in Cannot play neither IE10 HTML5 video nor Modern UI apps video.
Disable GPU rendering in IE as:
Internet Options > Advanced > Accelerated graphics > Use software rendering instead of GPU rendering
And see if it works.
I have had a lot of problems with IE10 playing html5 video.
The last thing I checked was the right oe : videos were gzip compressed.
Check your server config!!!
EDIT :
To know if your videos are getting compressed by the server, use a network proxy sniffer like Charles for example, or even IE's debugger and check the response header to the video file request. If you find Content-Encoding:gzip, then you should check your server config.
In my case I had to disable gzip compression on video files in my .htaccess file.
This is the code I use for my html5 videos:
<div>
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="none" width="auto" height="auto"
poster="path/to/image.png"
data-setup='{"example_option":true, "autoplay": true}'>
<source src="path/to/video.ogv" type='video/ogg' />
<source src="path/to/video.webm" type='video/webm' />
<source src="path/to/video.mp4" type='video/mp4' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["path/to/image.png", {"url": "path/to/video.flv","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="path/to/image.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
This should work on all devices/browsers. I have called the wideos in that specific order to allow modern browsers to load them faster (chrome can play ogg/webm/mp4 - from testing my videos ogg/webm seem to load faster them mp4 so it will reduce buffering times)
I've had the exact same problem. My original resolution of the video was 1920x1200. Seems that IE10 has problems with that. First tests with lower resolution videos solved the problem.
I'm using Win XP, service pack 3. I have an M4V video that I'm trying to embed in a web page using the HTML 5 video player found here -- http://videojs.com/. When I view this page through Apache 2.2, the video plays fine on Chrome and IE 7, but not on Firefox (just a black square without video controls) ...
<!DOCTYPE HTML>
<html>
<head>
<link href="css/video-js.css" rel="stylesheet" />
<script src="js/video.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="960" height="540" poster="css/video-js.png"
data-setup="{}">
<source src="videos/unpacking_w_students.m4v" type='video/m4v'>
</video>
</body>
</html>
Any ideas what may be going wrong? If there were some additional things I could add to the web page to help Firefox play it, that would be ideal, but if there is some other setting to adjust, that would be great to know as well.
Video.js should fall back to Flash when only using an mp4/m4v in Firefox, just like it does in IE7. Might be a dumb question, but do you have Flash installed in Firefox?
Otherwise, is it throwing any errors in the JavaScript console, or is there a live page we can look at?
You're only sending H.264 data.
Firefox doesn't have a patent license to ship an H.264 decoder, so it does not support that video format. It does support Theora and VP8.
I'm inserting an <audio> tag into a page. This works fine in Chrome and Safari on Mac, but on both Chrome and Safari in Windows the tag is inserted but the audio never plays. I've stripped the code down to the minimum, and it's now ridiculously simple. I just have no idea why Windows is being difficult.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
test
</title>
<script type="application/x-javascript" src="js/jquery-1.4.2.min.js" charset="utf-8"></script>
</head>
<body>
<script type="application/x-javascript">
$('body').html('<audio src="./audio/myfile.mp3" autoplay></audio>');
</script>
</body>
</html>
Interestingly, if I remove all JS and just insert the <audio> tag into the <body>, Chrome Win works but Safari Win still doesn't. Kind of a secondary question, but does Safari Win require QuickTime (not currently installed) in order to use the <audio> tag?
does Safari Win require QuickTime (not currently installed) in order to use the tag
Yes it does.