Has anyone encountered this problem?
Videos uploaded to an ASP.NET MVC5 website from a browser on a Windows PC or from an Android phone play back fine in any browser, on Android and even Windows Mobile but are not visible on iPhone.
The gallery code looks something like:
<div id="link_#fileViewModel.ID" class="row gallery-media-file">
<a href="#Url.Action("GetVideoFile", "File", new {id = fileViewModel.ID})" type="video/mp4" title="#videoViewModel.Title" class="m-0">
<video class="img-responsive">
<source src="#Url.Action("GetVideoFile", "File", new {id = fileViewModel.ID})" type="video/mp4" />
</video>
</a>
The server is IIS8 and has Application Request Routing Cache installed to handle byte range segment size.
Video is stored in the backend DB and served with the following action:
public void GetVideoFile(Guid id)
{
var file = _fileProcessor.Get(id);
Response.ContentType = file.MimeType;
Response.BinaryWrite(file.Data);
}
Any ideas... I'm stumped?
EDIT:
Files are uploaded using Dropzone.js -> https://www.dropzonejs.com/
EDIT2:
I'm also using the blueimp gallery to display files but it turns out removing the attribute:
type="video/mp4"
from the anchor tag allows the video to play on iPhone.
Unfortunately, it does not show a still of the video though and also plays without sound. Additionally, when the type attribute is removed from the anchor tag, it stops playing in the gallery on desktop and android.
Ultimately, I may have to render the html conditionally according to the client but the volume and video image capture is still a problem.
The following has been some help, but still no joy: HTML5 Video tag not working in Safari , iPhone and iPad
Related
It's a video page to make a website with django.
It comes out well on Chrome, but it doesn't come out on Safari... The same goes for mobile safari.
Playsinline and video tag are all correct.
Video source is the address of a video on the Internet, but it doesn't play when I import it from a static file.
Is there a solution?
If I have to encode, I also want to know the code that automatically encodes when I load a video.
I don't think those kind of static files are supported with safari
So I wanted to add an HTML5 Video object from another website to my website. On some websites, I can just copy the URL from the src but on some, I can't - because of the blob. I tried to copy the whole object but it shows nothing on my website. I tried this on a website which gives you access to a lot of TV channels and movies (legally) and I noticed that they used a classic HTML5 Video player so I thought I could just embed it to my website. I did this on other websites - I could even just left click on the video object and click on "Open video in new tab" and I could copy the video object from there. But on this website that option is faded out but there is a "Cast" option. Here is the video object from the website:
<video data-v-6c3a6820="" id="player" width="1366" height="768" crossorigin="anonymus" class="video-js vjs-default-skin vjs-big-play-centered" data-viblast-key="d6293ad219a4af6550b20f07e66451d72d53c9a3ca77413f2eb2bd3c0b947827df882f2913d340fb42195b89764dd8db49ffb3ba29d41708" data-viblast-src="https://sbb-bg-ku-h1-35.ug-be.cdn.united.cloud/stream?i=dBYjXstwR9iFl6QFDTk5RA&a=4IfyeulCQOI0ox6iM05xTU7I77AJV196e3vMhwvZao19ijsvI0wc_g8lAYTyZuZYqiRxSiyFAntLl91PHmdZsc9NJVntuPghZ5s03ktRfMlpV7Gv3YPbDXNz-DKEMMems9PkKqRKugkDdnj8bcZSCcpMSWFyYCyXkI_ZIpikT6reNFualp09uiT5dQQlbCKd1C8mWxOAo6tF9pTYVC2hVckzX4cni5rj2-Kh7taIT7zAOEHIiRW4GnldTY83w5aOxMpSfY00pD9SX0xmyxMyW_9HUsecpBSX3s1kt-v9ekiQddiO2D98DwklA3OVLkDlE36YNLr1zoQR21ilMLes4jz70Ti9ycUJs4jaOE2w9kuKzixbx6_oH5nqXsebppWc&sp=sbb&u=2kfu9hq2ibxxyxr&player=m3u8v&session=ebcae820-2cd6-45be-92ef-1e5b6c6ee6a5" src="blob:https://eon.tv/01051a85-367f-4ca0-9b53-03c615f8436e"><p data-v-6c3a6820="" class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a data-v-6c3a6820="" href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p></video>
The Blob URL comes from JavaScript and is most likely a source using MediaSource Extensions. JavaScript can retrieve the video (usually in DASH or HLS format) and append content while the video tag is playing it back.
You should look at your network tab in your developer tools to find the DASH manifest URL or HLS playlist URL.
Update:
I did a fully build via Android studios, and the HTML5 Video does not work at all. It may be related to it targeting a web site? Though I can have the app open a website from the app directly, so maybe something else I am missing. I also tried with the video in the app directory, but again, it did not seem to load at all.
I am building a Cordova/Framework7 app that I need to embed videos into.
The video loads, and I can scroll back and forth through the video, but the giant PLAY button does not respond when touching it in app.
<video id='video' controls>
<source src="https://website.com/FancyVideo.mp4" type="video/mp4">
Your browser does not support HTML5 video
</video>
I've tried to make an event listener to trigger the video (with and without the onload bi)
window.onload = function() {
var video = document.getElementById('video');
video.addEventListener('click', function () {
video.play();
}, false);
}
So I am not sure what to do, it should work.
I have followed several other question threads but none seem to work, or are mostly obsolete. I have also tried media plugins with similar results.
HTML5 element on Android
html5 videos not showing controls on android once loaded
Note:
I am using
PhoneGap desktop application, and a Galaxy S7 running Android 8.0.0
Cordova Android Version 7.1.0
Cordova Version 8.0.0
Framework 7 Version 3.0.1
PhoneGap Version 8.0.0
Just as the title says. I've been working on a site and had added a big html video for the main page.
I looked over online...myme types checked, h264 encoding checked. I looked over old versions of the file i've been working on and noticed an old pure HTML file which loaded the video in all browsers with no problem (which I guess discards any encoding or video quality issues)
It all was working neat. Even displaying in firefox, chrome an IE. BUT for some reason the video does not load in IE whenever the file extension for the page it's on is .PHP. To be precise, whenever i try it from my LOCALHOST (XAMP with Apache server)
I also checked the dev tools and under network it does show it as the right content type and no error whatsoever (getting normal 200 result)
Here's the snippet of the video tag used:
<div id="video_container">
<video autoplay loop poster="video.jpg" id="header_vid">
<source src="imagenes/video.mp4" type="video/mp4">
</video>
LOL, and just noticed...not even the poster image is showing in IE...wtf.
I'm so confused, could anyone enlighten me a bit please? Could it be something related to the path used? been digging around the net for days _
Check if your url is formed properly when you are using .php extension on IE. Same issue addressed quite a few time here.
mp4 from PHP - Not playing in HTML5 Video tag ||
Play mp4 file through php in HTML5 Video Tag in Chrome?
I notice IE doesn't like the properties without value, so try
<video autoplay="" loop="" poster="video.jpg" id="header_vid">
I am trying HTML5 video tag and I have downloaded a Microsoft sample and trying to run it but a strange thing is happening, and it is that it plays video coming from a URL (commented tag) but for local mp4 file it do not shows error and shows message "Invalid Source"
Here is my code please guide me what I should do to make it run local file correctly ?
Thanks
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--<video src="http://www.bing.com/az/hprichv/?p=Butterfly_Clipcanvas_223479_EN-US.mp4"
autoplay loop>
</video>-->
<video controls src="hprichv.mp4" width="300" height="200" autoplay loop>
</video>
</body>
</html>
EDIT
Web page and video files both reside in the same folder.
Im on Windows 7 Pro. I develop locally and then host/serve remotely. Trying to load a local mp4 file while developing locally ran into this identical situation. No combination of using localhost/myvideo.mp4 or 127.0.0.1/myvideo.mp4 or /aaa/myvideo.mp4 or myvideo.mp4 in same directory as file got things to work...but referencing a full URL like http://www.mywebsite.com/myvideo.mp4 did, as above.
On local machine, Chrome shows no error messages...just shows black box with controls. No clues as to whats up. Switched to IE and it showed the black box and controls and the error message. 'Invalid source'
I focused on #steveax question and Mime types.
Turns out IIS in this version of windows/IIS does not have a MIME type setup for .mp4. No clue why not...but not.
To add the MP4 MIME type, open Internet Information Services (IIS) Manager and follow these steps:
Highlight Default Web Site on the left panel;
Double-click MIME Types on the right panel;
Scroll down the list and notice that there is no .mp4;
On the right panel again, click Add: at the first field, write .mp4 and on the field below write video/mp4
Click OK and you are done.
Restart IIS!
I got this problem and found that the video codec was not supported.
Get a video converter software (like Oxelon - it is free) and choose the output to be .mp4 (even is the source is .mp4). Choose the video codec to be "H264" and the audio codec to be "AAC".
This will solve your problem.
I had the same problem
For Internet Explorer
I used FormatFactory, setting up AAC encoding for audio and H264 for output for the mp4 format, in "High Quality and big size"
For Google Chrome
I converted my original video to the webm format thanks to Free WebM Video Converter (make sure you uncheck everything that would like to install ads).
It took a long time but then it worked in Chrome.
<video controls>
<source src="thevideo.mp4" type="video/mp4">
<source src="thevideo.webm" type="video/webm">
</video>
I had a similar issue but it's just with IE 11. Firefox works great.
On IE, if I go to Compatibility View and add "localhost" to the list, the box disappears altogether.