iFrame video not playing on iPhone (Safari) - html

I have a video page on my website which is linked to my google drive via the following code:
I am using google drive instead of YouTube, due to copyright issues with music.
The video links work fine on desktop (even though I don't like the idea of clicking twice on file). It used to work on mobile but doesn't now. Is there a way around this to work on mobile please?
Code:
<iframe style="align src="https://drive.google.com/file/d/1YjBhWH4scLK4B-yR_fUXeJehUmtlFoFJ/preview" width="400" height="300" allowfullscreen="allowfullscreen"></iframe>
Thanks
Bini

Check if the attribute in your iframe are valid and compatible with for the iOS and safari version
you can use: http://validator.w3.org

I was able to get this to play after disabling cross-site tracking prevention under Safari > Preferences > Privacy.
It seems to be related to ITP and cross-site tracking prevention.

Use this method. Replace "videoID" at the end of the url.
<video controls>
<source src="https://drive.google.com/uc?export=download&id=videoID" type='video/mp4'>
</video>

Related

HTML5 Video not showing on Mac OS X (Desktop) CNA (Captive Network Assistant)

I'm building a captive portal for free wifi access. When user connects, the CNA pops up in the screen where my portal is loaded.
Problem: HTML5 video is not being displayed in OS X desktop. Even iPhone can show it, desktop doesn't. I cannot even inspect anything in this evil browser (can it be called a browser? I don't think so).
My video code:
<video id="promo-video" height="100%" width="100%" preload="auto" autoplay="" muted="" webkit-playsinline="" playsinline="">
<source src="externalUrlToVideo" type="video/mp4">
</video>
Remember, this very same code shows video on iOS (but doesn't autoplay... for now it's a minor problem).
Some screenshots* that may help some. Video should be played in the right column:
CNA doesn't loads video
What happens when I right-click video then click "Show controls"
Also, when I right-click then click "Open video in a new window", it shows only a video player, but nothing to be showed in it. Obviously, play button doesn't make it work...
You could try adding the type="" attribute to the source. Include the video MIME-type there, e.g.
type="video/mp4"
Also, I don't think video will autoplay on iOS. Historically it has prevented auto-playing because of data charges for downloading video content. I'm not sure if I recently read somewhere that was changing. From a user perspective it's arguably unfair to hammer their data allowance with auto-playing videos even if the aesthetic or UX is improved by it.

Google Drive video does not start on smartphones

I'm using a code to embed video from Google Drive. It works perfect when I'm watching on desktop. But, when I'm trying to watch the same video on my smartphone, it never starts.
Here is my code:
<iframe class="embed-responsive-item" src="https://drive.google.com/file/d/0B1MJDhOwhGWOaTZSYzM4ZkRPZDQ/view?autoplay=1 scrolling="no" border="1" bordercolor="red" width="640" height="480" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
</iframe>
Is there any solution for me?
You will have no issue if you use "request Desktop site version" from your mobile browser, to see the video. It worked for me.
Instead of /view?autoplay=1 on the video link, just use /preview
For some reason, Google or Android limit the video streaming functionality.
The other way around, would be to store the video in another platform.
I know this post is old but I stumbled upon this problem just now and I couldn't find any google provided solution. As a workaround, I compressed the video the most I could and placed in the HTML as a video with the source from google cloud:
<video width="100%" height="300px" controls>
<source src="https://drive.google.com/uc?id=VIDEO_ID&export=download&authuser=0"
type="video/mp4">
</video>
Keep in mind that the video has to be public for it to w
Now it works on desktop or on mobile, The only issue is that you sacrifice the google drive embedded controls like quality and captions obviously...

Embedding Video in O365 Site

I have a video that I would like to embed in an O365 website using HTML5 embeding code. When I insert it, the video works fine but as soon as I click save the video area is just a black box and I can't play it. If I click to open it in another window it does play fine though for some reason.
The code I am using is the following:
<video width="320" height="240" controls>
<source src="my video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Any idea why this would be happening?
While my questions remains valid as I don't know why it is happening, I found a work around for anyone having the same issue.
Rather than inserting the html embed code I inserted a media web part which was much easier and worked! I recommend this route!

Using .ogg file while with <video> on html5

I am trying to learn web development from w3schools.com
Currently I am studying HTML5 and I had a question on a code which I do not understand. If anyone could help it would be great! :)
In the below code, what is the function of the code
The code seem to run in the same way even if I delete this code.
Here is the link where I found this code:
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Thanks in advance! :)
Try using 3rd party HTML5 video player library, e.g. VideoJS for better support of different formats, browsers, as well as providing Flash player fallback.
From my understanding you are asking what exactly the
Your browser does not support the video tag.
is doing there and why we got it there...
Just so you can understand this better follow the below steps:
Launch Internet Explorer
Go at Tools and turn Compatibility View on
Visit the site you mentioned (on IE with Compatibility View on)
You will see you will be getting the message "Your browser does not support the video tag." (because internet explorer with compatibility view on doesn't support HTML5).
If you change that message to the code, this will be reflected to the right of your screen.
Is this a bit more clear now?
Video tag <video> is an HTML 5 Tag, which is for now supported by very few broswer vendors. The current browser that you are running your code does not support this tag so you are getting this error - "Your browser does not support the video tag.", To cater this you can learn about "Modernizr" is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

HTML5 video won't play picture [duplicate]

Im in the process of making a webpage, and im trying to insert a video. The video player loads fine, and you can press play, but only the audio plays, not the video. (When previewing in chrome)
When viewing in firefox it works properly
My code is as follows...
<video width="600" height="400" controls>
<source src="ds2.mp4" type="video/mp4">
<source src="ds2.ogv" type="video/ogv">
<source src="ds2.webm" type="video/webm">
Your browser does not support the video tag.
</video>
My Doctype is <!Doctype html>
I checked the MIME type, its Video/mp4. however, one of the mime requests is in red and cancelled (When checking with google dev tools networking)
Im using microsoft expression web 4 (incase it is relevant)
If i've neglected any important information please let me know and ill update the post :) Thanks in advance for your help :)
Your problem is with the file encoding. HTML5 supports very few types and, sadly, every browser can play only part of this narrow list.
If you convert your mp4 file to H.264 encoding it will work on chrome and IE9 and above, but apparently due to patent issues, firefox does not support it but will play it if the OS can play it. This is really annoying and still require the use of players in order to play files in not-supported browsers.