I am trying to get to the bottom of an issue on a 4th generation iPad issue we are having. We keep getting the following error and the page refreshes so there is no way to debug this in developer tools on a mac:
"A problem occurred with this webpage so it was reloaded"
The page uses fullpage.js and renders 22 separate html5 (mp4) videos that run in the background of each full page/section.
Weirdly, if we change the code to only render say 15 videos the page works fine!
The videos are between 500KB and 3MB each. The videos are 33MB in total.
They are embedded like this:
<video id="video-transport" class="video-bg">
<source src="videos/videoname.mp4" type="video/mp4">
<source src="videos/videoname.webm" type="video/webm">
<p class="vjs-no-js"></p>
</video>
Does anyone have any suggestions of what is wrong with the page? Is there some kind of upper memory limit or page size we are exceeding.
Is there an easy way of debugging this?
Thanks,
Phil
No idea why it's breaking, but...
Have you tried using the preload property for the videos to prevent loading them on page load ?
Related question
Or, if that doesn't workf for you, have you though a about using the fullpage.js lazy loading option the videos?
<video>
<source data-src="video.webm" type="video/webm" />
<source data-src="video.mp4" type="video/mp4" />
</video>
Related
I am meeting an error on my website and I can't put my finger on it, the custom video background I'm trying to implement works on some computers and doesn't on the some other.
It is not a problem of browser version since I tried it on 5 computers with the same versions and there is still 2 computer who fail to run the javascript on this specific area (it either works on all browser or the javascript goes off on all plateforms).
I think it is a problem of computer but what should I in order to make the JS of the video background work ? (If you can't pause or play the video, or if it launch as soon as you enter the page then you also have this issue)
Here is the website : www.fyz.ch/VR
Any thoughts ?
Maybe you need to convert the video in multiple file formats (mp4, webm and ogv).
I think you made a wrong structure for it and put a source tag outside of the video tag.
Add them like this :
<video>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogv" type="video/ogg" />
Your browser doesn't support the video tag
</video>
Moreover, it seems like you added the autoplay attribute to the video tag. So it's the normal behavior for the video to launch itself as soon as the user enters the site.
Could you provide some code to be sure of what your problem is ?
I have a small project of doing some html5 videos embed on a site.
I use a simple HTML video embed code
<video width="560" height="340" controls>
<source src="path/to/myvideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="path/to/myvideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
so my question is that possible to disable the copy URL when you right click on the video?
I know if they really want to get the video link there are ways to do so.
but just at least if I can do that one.
Thanks
You can catch right-clicks via JavaScript and thus prevent the right-click menu.
As you correctly noted though, it’s only a hindrance rather than prevention. HTML5 video is about direct integration into the browser and thus can also be saved like images, for example.
I have this page
http://joewillhelpyou.com
Users click the blue botton and a video page begins to play.
I have it simple. an iframe so the Jquery dows not mess with my tag that I found would not allow me to autoplay the next video, and 2 src for each video. In all the browswers they work okay, only one video is played back mp4 or webm. but in IE I keep hearing two playing back and I cannot figure out why
you can visit the page and tell me if you catch my mistake or a workaround for IE
<div id="videodiv">
<iframe src="http://joewillhelpyou.com/videos/step2/play02_01.html" width="1000" height="750"></iframe>
</div>
then this leads to a page where I have the video
<video controls autoplay width="936" height="624">
<source src="002_001.mp4" type="video/mp4">
<source src="002_001.webm" type="video/webm">
Your browser does not support the video tag.
</video>
under normal situations the code only plays one choce right? but in IE it seems to play 2 things at once, the rest of the browsers only sound out one track and that is what I want
I have an HTML5 video element on my page, it's scaled to fill the entire background with the idea being that it will loop as it plays. This works fine in Chrome but Safari and Firefox have stutter on loop. It's a good half a second in Firefox. Any ideas?
Here's my markup for the video player:
<video id="vid" preload="auto" autoplay loop onended="this.play();">
<source src="vid.mp4" type="video/mp4"/>
<source src="vid.webm" type="video/webm"/>
</video>
I've tried a number of things, like controlling the playback entirely with JS instead of relying on the browser to figure it out. But there's always the stutter. I don't think it's an issue with preloading because if I do it all locally the video loads instantly (obviously) but there's still the same loop. Is this just an issue inherent in these browsers?
I'm tempted to create two instances of the video and simply toggle them with JS after each finishes. It'd be really dirty but I'm not sure what my other options are.
I solved it by removing the audio track of the .mp4 during encoding. Not Ideal if you need the audio but it worked well in my case.
I had this issue and I actually fixed it by putting the webm source before the mp4 source. That way it tried to load the webm video format first, and it had less stutters when I was testing it. mp4 and ogv files both had stutters in Firefox and it drove me nuts, so I was amazed when webm files seemed to work as intended.
<video id="vid" preload="auto" autoplay loop>
<source src="vid.webm" type="video/webm"/>
<source src="vid.mp4" type="video/mp4"/>
</video>
I've got an audio file being played with the basic HTML5 audio tag:
<audio controls itemprop="audio">
<source src="http://mysite/mus/my_music_file.mp3" />
</audio>
I'm using Audio.js along with the audio tag for serving up a fallback flash version, as well as a nicely designed player.
In Chrome and Firefox, everything is working as it should, and it's showing the length of the track. Safari is showing: Infinity:NanNan in the spot where the song's length should be shown.
I did a search and found a few similar questions, but both seem to be talking about PHP headers? I'm not using PHP with my audio files, but it is within a Wordpress theme. Could that be an issue?
you should indicate the codecs, and not preload
<audio preload="none" controls>
<source src="/path/to/the/source" type="audio/mp3" codecs="mp3"/>
</audio>