Attempting to get a basic short video looping but can't get it to work.
This is the code I'm attempting to use:
<video class="bg1" preload loop autoplay>
<source src="video/bg1.mp4" type='video/mp4' />
</video>
Thanks for any help.
Found what the issue was in my case. I am using WebStorm and was viewing the site in debug mode - when opening the site, either local or on my web server the video loops as it should.
Related
Here is the link to the bigcommerce store I'm working on. It shows background video on all the devices except IOS devices on any browser.
https://axict.mybigcommerce.com/
Looking for help in this weird issue.
Thanks in advance.
Here is the video element code,
<video id="bannerVideo" class="bgVideovideo" autoplay loop muted playsinline>
<source src="https://store-1anxrygvum.mybigcommerce.com/content/banner-video.webm"
type='video/webm;codecs="vp8, vorbis"' />
<source src="https://store-1anxrygvum.mybigcommerce.com/content/banner-video.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
Your browser does not support the video tag.
</video>
From a quick check this actually does not work on Safari on MacOS either and it does on Chrome on the same Mac.
Looking at the network traffic you can see the server responds with a '200' to the byte range request from the browser for the video, which Safari does not handle well, although Chrome does:
The most common root cause of this issue appears to be servers that are not configured to handle range requests in what Safari consider the correct manner. It expects to see a '206' response when it sends a request with a byte range.
There is more discussion and examples in the answer here: https://stackoverflow.com/a/32998689/334402
Looks like you've uploaded the video to WebDAV - just like Mick's answer, the file hosting server that BigCommerce WebDAV uses is not configured to send the correct request type that IOS/Safari is looking for when loading a <video> element's source.
When I ran into this, I had to upload the video to AWS S3 Storage. You should be able to get 5GB permanently on the free tier.
I must start by saying I'm a newbie to html. I start from scratch and I try to do it the right way.
I've got a lot of help from stack overflow and most of my problems were solved by other's requests for help. But I don't seem to get an answer to a simple problem I got.
I've checked several answers to this problem, but none of it works for me.
MY PROBLEM: my videos only plays on Safari and at no other browser.
The most relevant post was the following: HTML5 video won't play in Chrome only
I tried the correct order and re-converting my files to mp4, ogg and webm using Miro converter but both didn't work. I added the codecs in to my code but this doesn't change anything. I added plays-inline as well from another relevant post but nothing...
My code is the following:
<!-- LANDING PAGE VIDEO - INTRO VIDEO -->
<video class="videoIntro" id="SiteIntro" autoplay="no-repeat" poster="VMF_MENU.png" plays-inline>
<source src="videos/Site_Intro.mp4" type="video/mp4">
<source src="videos/Site_Intro.webm" type="video/webm" codecs="vp8, vorbis">
<source src="videos/Site_Intro.m4v" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2">
<source src="videos/Site_Intro.ogv" type="video/ogg" codecs="theora, vorbis">
</video>
I got no error messages (expected).
What do you suggest I try to correct this?
Thank you in advance!
we have installed the player on our web page using an html5 element design, however, the player fails to load the controls which allows the video to be played.
We do not have this problem on any Android device this is only effecting the iOS devices.
Here is a link to see the player we have implemented:
https://liveconferencepro.com/vp/viewHTML5.php?id=tah1pa
Can someone please tell us where we can obtain the correct code so the player will work for iOS devices?
Tom
The player was broken for me in Chrome for multiple reasons. The first was that the link took me to the page served over SSL, but the Videojs includes were via http, which meant they were never loaded due to being insecure content.
Once I fixed that, I noticed this error in the console: Uncaught InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '<source' is not a valid attribute name.
This seems to be because you didn't close the opening video tag:
<video id="videoPlayer" class="video-js vjs-default-skin" controls autoplay preload="auto" width="412" height="232" poster="https://liveconferencepro.com/vp/logo.jpg"
data-setup=""
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
...
</video>
Finally, keep in mind that if you want to use custom controls on mobile, you'll need to enable custom controls. Due to idiosyncrasies in mobile devices, for now we've disabled custom controls by default, but you can set the option to nativeControlForTouch: false to disable this.
Hope that helps!
I've been using Video.js to embed mp4 videos, it's a great player, thanks to everyone who develops and works on it. For the most part, it's working great, but I have a few small issues I need to figure out.
Here's one of the video pages; Columbia River Bass Fishing. It's mostly XHTML Transitional, I think mixing the HTML 5 in is causing some issues, especially with attribute values, but as long as it works, I'll figure out the details later. Here's the video.js code:
<video id="WAW_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" poster="ColumbiaRiverSmallmouthBassFishing.jpg" data-setup='{"WAW_option":true}' >
<source src="ColumbiaRiverSmallmouthBassFishing.mp4" type='video/mp4' />
<track kind="captions" src="captions.vtt" srclang="en" label="English" default />
Your browser does not support this video. Maybe you should update your internet browser
</video>
The video stuff works great in Firefox, Chrome and IE11, but no captions. The "captions.vtt" file is correct and IE10 will display the captions locally on my computer, but on the remote server there are no captions. I tried using the full URL location for the VTT file but that didn't work either.
A quick look at the coding on this page should tell you that I'm no expert, but I'd like to try and produce code that works and is compliant, so forgive the stupid questions.
Thanks in advance
Ron B
Change .vtt to .txt rule out if it's a MIME type issue with your web server config.
If you need to add web.config to your root, it needs to list .vtt as an acceptable MIME type.
I've been working on an HTML5 video implementation, but I'm having some issues. I've been following the guide at http://diveintohtml5.info/video.html. I have encoded .m4v, .ogv, and .webm versions of all of the video. Chrome and Firefox have no troubles playing the video. When I attempt to play it in Safari, it loads the video container, but not the video. You see a white space where the video should be, the controls, and the "loading" text. In Web Inspector's network tab, the video's status is "pending" and the mime-type is "undefined". Interestingly, I only experience this problem on the staging site, while it works fine on my local dev.
When I visit the video directly in the browser on local dev, I get the following output in the console:
Resource interpreted as Document but transferred with MIME type video/x-m4v.
GET http://site.dev/content/videos/movie.m4v Plug-in handled load
Note that GET has a little red x to the left of it in the inspector.
My html code looks like:
<video class="html5-video" width="700" controls>
<source src="content/videos/movie.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="content/videos/movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="content/videos/movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
Your browser does not support this video.
</video>
Additionally, the video is ~20mb.
Any thoughts? Thanks!
Well...it turns out that the issue occurred because I was using .htaccess to password protect the directory. Interestingly, all browsers except for Safari would allow access to the video files. Thanks to those who helped!
Try encoding to mp4 and replace this file instead m4v format, update your code and run.
Work's fine.