Using the example from the Onion's VAST plugin for Video.js, I switched out the VAST xml file for one of my own which has a flash video for the ad's video source. When I play this in Chrome, I see the video start to play for a split second, then it stops and goes black. The error is:
Video.js: currentTime unavailable on Flash playback technology element.
The weird thing is that this setup works perfectly in Safari 8 on OSX.
Any ideas on what's going on here?
Update: Found the source of the problem is coming from my not including the videoJS CSS. Once I put that back in, the flash video ad plays again. How can not including CSS break this? Again, not including this CSS only breaks the playback on Chrome.
The script is crashing when the video element is not absolutely positioned. I haven't dug deeply enough to figure out exactly what the dependency is, but I'm pretty sure it's to do with the updating of the text in the "Skip in 5...4..." button. In fact your "split second" is exactly a second - it plays until the countdown tries to advance, and then throws an exception.
If you include this style the video will play
.vjs-tech { position: absolute; top:30px }
(the top: 30px is just so the video doesn't cover the play button - it still works with just the position: absolute, but it's harder to find the button)
Related
I am working with videos and sometimes need to show a short video over a stream. But in Chrome the videos start flickering kind of like underlying video is leaking into the one on the top. I tried position: absolute, transform: translateY(-100%) and grid-area: 1/1/2/2 and the same result is produced in each case. It happens even if there is another non-transparent absolute positioned layer in between the two. It only works when an underlying video is hidden completely using visibility: hidden, display: none or other similar technique.
You can check this StackBlitz to see for yourselves.
It works properly in Firefox but not in Chromium based browsers.
EDIT: it seems that this doesn't happen to everyone and is somehow linked to the hardware acceleration feature in Chrome. When I disable hardware acceleration the flickering stops for me also. Looks like a Chromium bug to me.
I don't know if this is a real issue since I am seeing it mostly when using an emulator, but it seems to be reproducible, and I noticed it on a friend's Android device. URL is:
Link To Page
On some devices, particular iPad Retina emulator, when you click on the hamburger it moves the body of the page to the right as expected, but the side menu area is completely blank, despite the fact that there are elements there and you can click on them, they just are not showing up, so they are being rendered but the whole sidebar is just blank (see picture)
I did discover a useful feature on the developer menu with Safari that I was not aware of. You can go to Develop -> Simulator and use the inspector for the page that is loaded in your simulator. Quite a nice feature, but still not able to quite figure out what the issue is.
It is using a Joomla! template and looking at the source seems like it could use a lot of tweaking because there are a ton of .css and .js resources, some of which probably are not needed and some which probably conflict with one another, some which are not needed on the front end, etc.
Help appreciated.
This kind of a fix:
body.jsn-menu-mobile-push-left {
margin-left: 0px;
}
but not ideal. It shows the menu in this case but it doesn't slide out the body to the right. That is a little strange since when the margin-left is set to 0px it doesn't display.
So I have a website with a menu-bar at the top with a sub menu that appears when you hover.
Under the menu, I have a large video playing embedded with the HTML5 <video> tag. However, on safari on ipad, i can not click the links that are hovering above the video, despite me having given them an appropriate z-index.
Can anyone help me out here? :(
edit: here's a jsfiddle: http://jsfiddle.net/7t6c00vn/
The issue seems only to happen on ipad.
The video takes precedence over any other material. Check Putting Video on Canvas on developer.apple.com.
So far as I can see the only solution seems to be to hide the video. Check
A Solution for Overlaid Elements on Video
I would also love to know if there is any other / better solution to this because I'm also in the process of building something using HTML5 and video that needs interaction.
It turns out that it's a sort-of-bug that was fixed with an update for the system. I don't think this problem has a definite answer yet, but I will choose FrankHe's answer as it actually provides some real suggestions and material for the problem.
But yea, things seem to work after the iOS update, so to any end users experiencing overlay problems with Video elements, update your systems! :)
Unfortunately, this also means I no longer have an un-updated device to test on.
So I have a video playing in the background of a splash page, it is running on a loop with no available controls and I have text and an image sitting on top of it. I set it up as a with z-index: -100.
This works perfectly in Safari and Firefox, but in Chrome and Opera when the page loads everything on top of the video disappears. As soon as I resize the window everything re-appears, but when I refresh it has the same problem.
I'm not really sure what to try at this point or if this is a common problem. Any help would be great, we're trying to launch the site tomorrow.
Edit: Here's a link to the site. I was hoping this was a common enough problem that there would be a well known fix. http://jessemacdesign.com/upload/splash.html
For me, it's working in Chrome and Opera no problem (so check you don't need an update!). However, I wouldn't recommend using negative z-index as there's not really any point in doing so. Try this for your z-index and see if it works:
video#bgvid {
z-index: 1;
}
#bgimg {
z-index: 1;
}
I would also remove the z-index from #main as I don't feel it's needed.
Failing all of the above, try structuring your page differently so your video is in it's own div. I can't recreate your issue myself though, it's working in Chrome and Opera for me.
Original: Any chance of a link? It would be hard for me to help you without viewing the code directly!
Im makin' a mobile website for a friend - and im using media queries to adjust her website for a more mobile feeling when watching it on any smartphone.
Feels like im done with the webpage - but when i view it on my phones iphone 3gs and htc incredbile S its like that you can scroll 2-3 pixels horizontally.
Some element is messing with this and im growing gray hair since i can't really find out which it is.
how do i solve this?
webpage link
http://www.linaahlen.se/
Had a quick look with the inspector in Chrome and it looks like it's this property:
div.entry {
padding: 0em 1em;
}
Line 106 of style-responsive.css - it's pushing the content just a few pixels wide, changing it to be padding: 0 0.8em; worked for me.
Oh, and just for the record, it's scrolling horizontally, not vertically!
Late, but for future reference.
I would like to point out the way to go searching the cause for the problem.
Open the site using Google Chrome Device Mode. Then check to see that the problem exists there (this solution relies on the problem to show up in the Device mode). Then start setting "display: none" to the elements one by one starting from larger elements like header, content container and check after hiding each element if the unwanted scrollability has dissapeared. This way you can track down the cause of the problem.
I had the same problem and tried to identify the cause at first by looking at the CSS code of every single element, wasted a lot of time and didn't find the cause. Probably a browser can render a page better that a human reading CSS...