Hello
I have this html video tag:
<video id="asdasd" width="320" height="240" controls preload>
<source src="getVideo.php?video=some.mp4" type="video/mp4">
</video>
Where getVideo.php is:
<?php
echo file_get_contents($drivepath.$_GET['video']);
?>
I tried this on chrome and safari and it works, but it doesn't work on ipad.
How can I make work this on ipad? Is there a way to make video src parametrized, without giving the file path directly?
Thanks all.
The problem is probably the encoding of the MP4. (Hard to say with authority without a link to your problem file.) Apple devices are very particular about what they will and will not play.
The solution: Encode the video with h264 Baseline Profile 3.0
Technically the iPad can support h264 Main Profile 3.1, but that won't cover iPhones.
Related
I'm trying to play an external HTML5 video within a webOS web application. According to this question, webOS should support .mp4 video, but whenever I try to play a HTML5 video within my application, the video simply won't load/play. My code (for testing purposes):
<video id="demo-video" autoplay muted loop>
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4"
type="video/mp4">
Your Smart TV does not support the current video format (MP4)
</video>
I've tried different sources, but none of them seem to work. When testing in a browser, it does work, but when opening the application on a webOS Smart TV, nothing happens. Even trying to play a local .mp4 file doesn't work.
I found out that .play() on the video element returns a Promise with status pending. Strange behaviour and reloading the source doesn't fix the problem.
I found the problem: it had something to do with the styling I applied on the <video> element. When developing, Chrome showed the video just fine. But apparently, border-radius is not allowed? At least not in the version of Chrome used on the Smart TV and emulator. So if you're experiencing the same problem, check for styling that may cause the video not to play.
Try adding width and height attributes to your video tag. The video works on my TV.
<video id="demo-video" width="1920" height="1080" autoplay muted loop>
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" type="video/mp4">
Your Smart TV does not support the current video format (MP4)
</video>
I'm trying to create a HTML5 video background for a website but I cannot seem to get it to work on Safari. Does anyone have any ideas?
Here's the HTML video tags I'm using
<video id="bgVideo" class="bg__video" autoplay loop>
<source src="./vid/Sample_Vid.ogv" type="video/ogv">
<source src="./vid/Sample_Vid.m4v" type="video/m4v">
<source src="./vid/Sample_Vid.webm" type="video/webm">
</video>
I've tried adding a script tag under it to start playing the video with JS but that's not helped either.
document.getElementById("bgVideo").play();
When I inspect the page it looks like the video element is taking up space in the DOM but it's just invisible basically.
I've also tried opening the .m4v files directly in the browser & it plays it there so I assume the file isn't an issue. These were all generated from easyhtml5video.com
I also have the Modernizer script to detect if autoplay is enabled for the browser which I've had to alter based on a pull request in the github repo as it was always saying that Safari doesn't support autoplay otherwise.
The test site I've setup is http://treetopia.neilnand.co.uk/
The supported video format for Safari is mp4 with H.264 encoding. (you have a .m4v extension and file type)
If video does not has sound - use
document.getElementById("bgVideo").volume = 0;
Safari don't allow autoplay for videos with sound.
I am new to video player world. I want to develop a mobile browser based video player. I know HTML5 and its flash fall back but this is a different requirement .
The requirement is, using Object tag I should embed my video so that it Plays in all the mobile devices(Browser). Code help will be highly useful . It mandatory to use Object tag . If any swf or anything like that which is compatible to all mobile browsers..
Thanks in advance .
Using the <object>-tag is a bad way. Why is it mandatory for your use? Why not go with the <video>-tag instead? Also, <object> is deprecated as of January 27, 2015.
If the file you want to embed is playable by most phones (such as a .MP4 file), you can use the <video>-tag instead.
<video width="500" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
If you're embedding an .swf file, you cannot play it on devices with no flash support. I am unable to play .swf files natively in Chrome on my Android phone, and don't even think about iOS devices.
If you really, REALLY want to use the <object>-tag as well, you can wrap that inside a <video>-tag, like this:
<video src="video.mp4" controls>
<object data="flvplayer.swf" type="application/x-shockwave-flash">
<param value="flvplayer.swf" name="movie"/>
</object>
</video>
I'm trying to use the html5 video tag to embed an mp4 but I'm having some issues that vary across different browsers.
My code looks like this:
<video controls="controls" width="640" height="360">
<source src="http://www.mydomain.com/video.mp4" type="video/mp4" />
</video>
IE - Won't recognize the file when trying to embed (edit: IE was actually dragging on the file size not the format) and when the uri to my video is plugged into the address bar it opens the video in windows media player.
Chrome, Firefox - Simply will not recognized the file format (edit: Firefox was dragging on the size as well, Chrome was the only browser having issues) and when the uri is plugged into the address bar it attempts to play the video within the browser but fails.
Could there be something within the file that would prevent it from being embedded? If so, how can I find this out?
The problem is likely that the browsers are not supporting MP4, because it is a proprietary format. To get the best cross-browser support you'll have to also encode your video in WebM and Ogg/Vorbis formats and then add those files to your video tag with their own source tags.
Just because a browser will play a video if you navigate directly to the video's URL does not mean that the browser supports that format. Usually, navigating straight to the video causes the browser to play the video with a plug-in such as Quicktime or VLC that has much better codec support than the browser does.
try this without that "/"
<video controls="controls" width="640" height="360">
<source src="http://www.mydomain.com/video.mp4" type="video/mp4" >
<source src="http://www.mydomain.com/video.ogg" type="video/ogg" >
</video>
Can anyone give a concise instruction on how I can have a flv play from my html page please?
With video.js its very easy. All you need to do is include js & css in head & then use html5 code as:
<head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video id="video1" class="video-js vjs-default-skin" width="640" height="480"
data-setup='{"controls" : true, "autoplay" : true, "preload" : "auto"}'>
<source src="video1.flv" type="video/x-flv">
</video>
</body>
For further details: http://videojs.com/
Actually, I did not find information specified about playing flv files. But it works fine. :)
You can use other video formats using video.js all you need to change is type as...
<source src="..." type="video/mp4">
Moreover, there might some issue regarding your browser, does your browser support the .mp4 format, I could not play .mp4 in chrome, but it works fine in firefox. Try adding more sources with same video in different formats. Like...
<source src="video1.mp4" type="video/mp4">
<source src="video1.ogg" type="video/ogg">
<source src="video1.webm" type="video/webm">
Wrap a flash player around it, such as Flowplayer. There currently is no other way; browsers can't just render an FLV by itself.
See the installation guide for Flowplayer, taking you step-by-step on how to place the video directly into your HTML.
I'm fairly certain that shadowbox can also play FLV files: http://www.shadowbox-js.com/
It's clean, minimal and fairly simple to setup.
You can try https://github.com/Bilibili/flv.js
With flv.js, You'll get:
Pure HTML5 + JavaScript Video Player for flv videos
Pure HTML5 + JavaScript LiveStream Player for http-flv streams
Flawless experience
Smaller size than H.264 Videos
Flv.js utilizes MSE (Media Source Extensions) therefore it'll only be available on Chrome 43+, Firefox but not Apple / iOS Safari.
Flv.js instantaneously transmuxes flv streams to H.264 streams and then push the H.264 stream to Media Source Extensions. It'll display as a video tag in HTML Element with a blob URL.
Another really popular Flash player is the JW Player, at http://www.longtailvideo.com/ . They have a nice setup wizard that generates the code you need.
Insert an SWF object into your HTML and assign the FLV in the attributes as the video that will play.