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!
Related
So I've looked over the apple docs and checked that my video will play inline (I am storing the video on s3).
My video on https://themobilecigarlounge.com will play on all devices and browsers with the exception of apple. It will play but not until you click a link and then go back to the homepage.
<video class="video-background" id="backgroundVideo" playsinline="playsinline" autoplay="autoplay" muted="muted"
loop="loop">
<source src="https://cigarlounge.s3.amazonaws.com/Cigar-Rolling-Suit-medium-new.mp4" type="video/mp4" />
<source src="https://cigarlounge.s3.amazonaws.com/Cigar-Rolling-Suit-medium.mov" type="video/mp4" />
</video>
Is the code I am inserting it with. What am I missing here? I have all the tags, I stripped the video of its audio track and I have it muted.
This turned out to be an issue with the Meteor framework I was using. I do not understand the root of the problem but it is some sort of rendering issue. I noticed where in one site this function was working perfectly the <video> tag was within a {{#if}} helper.
So I experimented and put the video within an if block that became true 100ms after the page rendered.... This solved the problem but seems hacky. Seems to be some sort of issue with the blaze templates rendering.
I have working code for a video element within my site thats fully functioning on ios 9/10 and all the normal browsers (chrome/ff/ie) etc.
I've noticed that since the ios 11 update the videos no longer play or even work at all. They appear as a blank box with the controls but pressing play does nothing and opening the video full screen does nothing.
Here is my relatively simple code
<video playsinline onclick="play()" controls autoplay
controlsList="nodownload">
<source src="assets/images/video_im.mp4" type="video/mp4">
</video>
I've tried different variations of using playsinline="true" and controls="true". They have no effect.
I've tried to google the issue but there seems to be nothing except a podcast taking about ios 11 removing html5 video support, surely there is a fix?
Any insight/help would be much appreciated.
Cheers
It looks like the following code:
<video>
<source src="path/to/video.mp4">
</video>
stopped working on ios11 (with many other features too...). I confirm that source tag did work on ios9 here). Try placing the src="path/to/video.mp4" into the video tag directly, it should work on ios11.
A working example taken from webkit.org post on New video Policies for iOS:
<div id="either-gif-or-video">
<video src="image.mp4" autoplay loop muted playsinline></video>
<img src="image.gif">
</div>
Safari on MacOS seems to have a similar problem, maybe it's easier to test there. Looks like we lost the multiple source feature tho :(
I had a similar problem with videos not playing on Safari. The problem was my web server. I moved the video to another hosting server, loaded it from there and it worked.
e.g.
instead of:
<video src='/myVideo.mp4' controls> </video>
do something like this:
<video src='https://anotherServer.com/myVideo.mp4' controls> </video>
I want to play a video with html5 video tag from a network server.
I'm also make the test with an image, but I got, with Google Chrome, the error "Not allowed to load local resource".
I've already searched and this happens by security reasons of the new web browses.
For the video I'm using the basic html. If I play the video from my computer, like, it work well (obviously)
<video width="320" height="240" controls>
<source src="videos/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
But when I change the source to: 'file:///fileof1/FILESRV/videos/movie.mp4', nothing happens.
Anyone with a solution?
I have following problem. I have embedded video on my page:
<video id="video_1" width="520" height="360" controls="controls">
<source src="http://patho/to/video.mp4" type="video/mp4" />
</video>
When i open my page i see black box. After 4-5sec play icon is being displayed.
Is it possible to see this play icon immediately ? I tried to do a progress bar or something and checked all media events -> http://dev.w3.org/html5/spec/single-page.html#mediaevents .
But it looks like this problem is not connected with my video but with quick time which need time to be loaded. Am i right ? Or there is a workaround for this ?
One thing i can do is to initialize video earlier and then just show it via js ...
Take a look at this document about preloading? If your file is huge sized, then nothing could be done.
PS: IOS has own way of playing html5 video, is hardware accelerated and displayed above browser by system hack. That's why I think there is nothing that could be done.
what you can do is use the poster setting of the video tag:
<video poster="http://link.to/poster.png">
<source ... />
</video>
this should lead to the image being displayed immediately after download of it,
then download the play button once the player and the vid are loaded.
have fun,
jascha
It sounds like the index is at the end of the file: How to get your HTML5 MP4 video file to play before being fully downloaded.
I have included a video (using html 5) from my hard disk into a html file (called Empty.html). I load this file(Empty.html) into a frame of another html file. But, when i click the play button in the browser(chrome) the video jumps to a new location(leftmost of chrome) within the browser and plays.
I am attaching the screenshots below. Can someone please help me resolve this issue ?
The code below is the one used by me for inserting the video
<video poster="images/vlcsnap-00001.jpg" height="240" width="320" draggable="false"
controls="controls">
<source type="video/mp4" src="videos/How nuclear energy works(360p_H.264-AAC).mp4"/>
</video>
This appears to be a bug in Chrome. I would recommend reporting a bug to the Chromium project, including a minimal sample file (or files) that demonstrate the problem.