I have 2 video elements on my test page, like so:
<div id="parent">
<video id="foo" autoplay>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg" />
</video>
<video id="bar" autoplay>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg" />
</video>
</div>
In the latest FF, everything works fine. In Chrome however, neither of these videos will play; looking at the net tab reveals that they get stuck in 'pending' status for anywhere from a few seconds to infinity. If I comment out/remove a video element, the other will play.
I've seen multiple Chromium bug reports talking about similar issues, but none that seem to be directly related to a parent container. I've tried building the markup dynamically through JS with the same result. I've also tried adding codec attributes with no luck.
For the sake of argument, lets say restructuring the page so no videos live in the same parent isn't an option. Is this just an unfixable bug? Any possible workarounds, however hacky?
Solved - apparently making a request for the same filename from the same server at the same time freaks Google out. Changing filenames, or domains, works fine. FWIW, I duplicated the test vids and added 1, 2, 3, etc. to the end of the filenames and ran them from the same server. Works as expected. Using test videos from different domains got me on to the solution.
Related
I'm a designer and I do projects where I try to code, let's say I DIY in front end! But right now I want to do something where I'm completely stuck.
I would like to have several screens (multiple devices) containing videos, they would all launch at the same time when clicking on a button on a specific page.
I heard about nodejs to maybe create several pages each containing a video, and on clicking a button on the index page all the other pages launch the video at the same time. I tried to dive into nodejs but I'm extremely clueless, I'd like to know if you think it's possible to do it like that? And if so, if you maybe have any resources?
I hope I'm clear, thanks a lot in advance!
You can achieve this with pure html and javascript, I'm not sure that's what you asking but...here is an example:
document.getElementById("clickme").addEventListener("click",function(){
document.getElementById("vid1").play();
document.getElementById("vid2").play();
document.getElementById("vid3").play();
})
<video width="400" controls id="vid1">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<video width="400" controls id="vid2">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<video width="400" controls id="vid3">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<button id="clickme">click me</button>
I'm trying to do a simple video with autoplay on our homepage (http://froy.com). Nothing fancy. Everything works smoothly in Firefox and even IE.
However, the autoplay does not activate on Chrome. I have tried in incognito with no extensions and issue persists. Weird part is, trying the code out on jsfiddle works! Additionally, I see similar video tag used at other websites working as well.
In fact, I went through bit by bit adding different parts of the entire homepage's code to jsfiddle (html, css, javascript) to try to isolate the issue - no luck. I'm at a loss and any help would be appreciated.
Below is the code:
<video preload="auto" autoplay loop muted width="100%" height="auto" style="margin-top:-25px" >
<source src="https://cdn.shopify.com/s/files/1/0220/3498/files/Video_Slider_1.mp4" type="video/mp4">
<source src="https://cdn.shopify.com/s/files/1/0220/3498/files/Video_Slider_1.webm" type="video/webm">
</video>
Does this have something to do with my javascript? If so, why is jsfiddle not picking this up when I include scripts in it?
I am using the same code which you are using, just the video is served from my server, and everything is working fine.
<video preload="auto" autoplay loop muted width="100%" height="auto" style="margin-top:-25px" >
<source src="http://www.example.com/clip.mp4" type="video/mp4">
<source src="http://www.example.com/clip.webm" type="video/webm">
</video>
Google Chrome Version: Version 38.0.2125.111 m
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>
Before adding popcorn.js, the video run great on Firefox and Chrome. Now I add popcorn.js for subtitles purpose, it work on Firefox but it does not work on Chrome(video is blank white with unclickable video control). I already have alternate video sources in HTML,
<video id="video" width="620" height="420" controls="true" preload="none">
<source src="caption.ogg" type='video/ogg; codecs="theora, vorbis"' />
<source src="caption.webm" type='video/webm; codecs="vp8.0, vorbis"' />
<source src="caption.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2, H.264"' />
Your browser does not support HTML5 video
</video>
Anyone tell me what wrong with it? My suspect is that popcorn.js only work on Firefox?
popcorn.js only work on Firefox?
False
Popcorn.js works great on Chrome.
Please validate the following:
You're using a recent version of Chrome.
The computer you're using is healthy (no viruses, no garbage etc...)
Either post the JS you wrote or go through it line by line, checking for any errors.
(should be 1 actually) Did you check the chrome dev tools console for any errors?