I'm trying to get an MP4 video playing in an email via HTML tag. (code below).
This code has been taken and adapted from a trusted source (http://www.emaildesignreview.com/email-design-best-practice/html5-video-in-email-1149/), however said source states that it should play on iPad/iPhone.
At the moment, I can only get it to play on Apple Desktop mail and Hotmail(now outlook).
The iPad/iPhone recognise this as a media file, but refuse to play it. Is there something wrong with my code, is there something missing?... or is the world just not ready for this yet?
Thanks
<video width="328" height="242" poster="backup.png" controls="controls">
<source src="videosource.mp4" type="video/mp4" />
<img src="backup.png?1363867422" width="328" height="242" />
</video>
I've done a fair bit of testing with HTML5 video, and unless you're just sending to people you know will open with iOS devices, it just isn't worth the hassle at the moment.
I wrote this a while back and the same thing is still very much true: http://jacques.corbytue.ch/blog/html5-video-in-email-one-step-closer/
As far as your code, try using absolute URL's instead of relative ones.
Related
Problem
I'm having videos on a webpage that show the first frame of the video and on hover play the video with a length of around 10 seconds and a resolution of around 720p. I thought of just uploading them to my provider's FTP storage. But then thought that they surely don't use CDNs to deliver content.
So my next thought was using something like Vimeo, Cloudinary, MUX...
I now have seen that I could add videos on a webpage with HLS (m3u8). But I've never done that before so I read my way through these streaming formats.
After that, I'm really unsure what to use in my case as it seems that HLS or DASH is usually more performant than downloading the whole file.
Vimeo for example would give me the option to get a direct link to the .mp4 or HLS.
I'm not seeing a video when using a standard tag. But I found articles that say HLS is now supported in every major browser.
Would you recommend going for such a use case with HLS or Dash and if yes what's the best way to implement it?
What I've tried
<video width="320" height="240" controls>
<source
src="https://player.vimeo.com/external/734323487.mpd?s=234"
// type="application/x-mpegURL"
/>
Your browser does not support the video tag.
</video>
The volume control in HTML5 videos on my website is not appearing, see screenshot: The video plays when started, but without any sound. The videos also play fine (with sound) in VLC and Windows Media Player.
I have tested in Chrome (65.0.3325.162), Firefox (59.0.1), and Android (on a Samsung tablet). The volume of my system is fine with other applications, and YouTube videos.
Here is the (minimal) code (adding additional attributes like height and poster etc. makes no difference to the problem):
<!DOCTYPE html>
<html lang='en'>
<body>
<video controls src='vid1.mp4' width='500'>
</video>
<video controls width='500'>
<source src='vid2.mp4' type='video/mp4' />
</video>
</body>
</html>
Am I missing something obvious?
[1]: https://i.stack.imgur.com/qAl7D.png
EDIT:
When I tested with a sample video on http://techslides.com/demos/sample-videos/small.mp4 the controls appeared. It seems to have something to do with the encoded mp4 video itself.
I have now removed the video urls. I re-encoded the videos using VLC, and they are now working correctly.
Why are these HTML5 video problems cropping up now after 5+ years?
TLDR: Your code routes around video content farms and their ad-click revenue by short circuiting MP4 content and eyeballs per second, this is retaliation. It's par for the course.
Browser developers have busted your HTML5 <video> browser embed code, either on purpose or by accident around the codecs needed to decode them. They own the source code of the browser that interprets and decodes your HTML5 MP4 file for presentation in the browser content area. Chrome developers corner the market on MP4 Videos and had their arms twisted by the powers that be. So the browser sees that the codec required to decode your MP4 is likely from an unauthorized area, and thus here we are scratching our heads as to why chrome isn't showing a volume button.
My requirements has to be that HTML5 Video is fixed on server side, I can't require users to fiddle around with their chrome flags or installing a plugin that corrects the bug. It has to just work by default on the latest Chrome, Safari, Firefox then IE, preferably in that order.
Screenshot of the case of the missing HTML5 video volume button:
The video plays, but at zero volume. No volume button is ever presented either during initial load, nor during or after playback. The mp4 download and go-full screen buttons are presented and work correctly during playback.
And yes, the chrome flags for new media player are disabled:
What it looked like before, what I expect to see:
The stripped down code I'm using:
This code was evolved from the likes of: http://camendesign.com/code/video_for_everybody
<html><body>
<video width="640"
preload="none"
height="360"
poster="some_content.png"
controls="controls">
<source src="some_content.mp4"
<source src="__VIDEO__.webm" type="video/webm" />
<source src="__VIDEO__.ogv" type="video/ogg" /><!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D348
[endif]--><!--[if !IE]><!-->
<object width="640" height="375" type="video/quicktime" data="__VIDEO__.mp4"
<param name="src" value="__VIDEO__.mp4" />
<param name="autoplay" value="false" />
<param name="showlogo" value="false" />
<object width="640" height="380" type="application/x-shockwave-flash"
data="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4">
<param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&file=_
<img src="__POSTER__.jpg" width="640" height="360" />
<p>
<strong>No video playback capabilities detected.</strong>
Why not try to download the file instead?<br>
MPEG4
Ogg Theora
</p>
</object><!--[if gt IE 6]><!-->
</object><!--<![endif]-->
</video>
</body></html>
The above code is the code that used to work, but got broken.
Final solution that worked for me: Manual clean of the 3rd party taint from my MP4 videos.
There are many options to clean and re-encode an MP4 video, some free others non-free. One way is open the MP4 file with VLC or other video player or software that has and open/save/reencode/convert tools in it, and save it out to a different video encoding format.
I was able to cook up a handy dandy script in Java to iterate over every MP4 file crack open the MP4 file, clean out the hobo taint if it exists then save and redeploy the mp4 file, and now all is well. Then do this on a schedule.
Other solutions considered, but rejected:
Eliminate the bugged HTML5 video embed tag from your tool set. Display an image with an html5 <img .../> tag, overlay a play button so as to indicate this is a video, when the user clicks either open a new tab where the raw MP4 video plays in browser: the volume button is shown correctly, or worst case the user downloads the MP4 video to disk, and they can open it up from disk with their video player.
Use a different browser or an open source browser, that know how to do the right thing.
Try toggling on the 'new media controls' chrome://flags, maybe at some point in the future the Chrome Devs will push a fix and it won't freak out on the evidence that the mp4 smells of digital rights violations.
Yield the vanguard and eyeball click revenue to the big player content providers, just use an whatever tag to redirect users to the websites who are able to show video correctly.
The game is afoot make your time.
It seems that you are using a mute video. Because of that, the volume control is not showing.
Check this out:
<video src='https://www.w3schools.com/tags/mov_bbb.mp4' controls>
</video>
I have a video.avi file and and html page on a server, and I would like to "embed universally" my video inside the html so that people could see it. By universally I mean in a way where I would be the less dependent on browsers/video viewers the viewers could have. In fact (I am dreaming for sure) I would like everyone with every "decent" "recent" browser to be able to see it...
I know how noob it sound, but I had a working html code who stopped doing the job a couple of weeks ago (the video does not appear anymore) and I would like to solve the issue once for all...
(I don't want to upload my video to youtube and to embed a youtube video though.)
I indeed opted for :
<video width="1020" height="310" controls>
<source src="myvideo.mp4" type="video/mp4">
</video>
and realized a pretty decent conversion with one of the first freewares I found online, I don't want to advertise for.
I am using the following code to embed an mp3 file into my html document:
<embed src="aharddaysnight.mp3" width="140" height="40" autostart="false" loop="FALSE"></embed>
In IE, this works fine, as an mp3 player with controls automatically shows up.
In FireFox, however, a pop-up appears that says additional plug-ins are needed. When I click on the option to install additional plug-in, it doesn't allow me to because of a security certificate error.
In Chrome, the player shows up, but the media starts playing automatically, even though the code says autostart "false".
Does anyone have a better way to embed mp3, or a fix to this problem?
I have tested this in Chrome and Firefox and works in both, with the fall back. However if it is a long file, like the 2 hour audio I am trying it stops playing. Hopefully it will help you and I will keep looking for my fix.
<audio controls="controls">
<source src="yourURL.mp3" />
<source src="yourURL.ogg" />
<!-- fallback -->
<embed type="application/x-shockwave-flash"
flashvars="audioUrl=yourURL.mp3"
src="http://www.google.com/reader/ui/3523697345-audio-player.swf"
width="650? height="0? quality="best"></embed>
</audio>`
Try this
type="audio/mpeg"
OR
type="audio/midi"
Alright, I have a server that serves a motion-jpeg stream over http. What I would like to be able to do is connect to the server and visualize the stream in a browser, preferibly inside a canvas element. Browser should be Safari Mobile.
Is it possible to take the stream with XMLHttpRequest, take the single JPEG images out and put them within a canvas element? Keep in mind that the stream is live, thus possibly endless.
Sorry to revive an old topic but i was faced with this problem and i didnt want to use an other player just native html5
I found one way to display the video inside html5 with "poster" attribute
<video width="360" height="420" controls poster="/video" autoplay>
<source src="/audio.ogg" type="audio/ogg" />
</video>
Might not be what you expected but it works.
iOs mobile Safari supports MJPEG natively over http. Is there specific reason you need it in Canvas?
see http://bridgecam2.halton.gov.uk/mjpg/video.mjpg?camera=1 on a ipad/iphone