I guess this in not only related to the <video/> tag… I’m working on a jQuery-based app that dynamically loads static HTML pages and injects them into the DOM. Amongst these, there is a page with flash video markup plus a HTML5 video fallback.
When I load this in FF and wrap it in $() (not adding it to the DOM yet!) for easy DOM selection, Firebug indicates that all resources (video files, SWF files, images, etc.) get downloaded, plus the HTML5 fallback starts autoplaying and thus creates a ghost sound: no video to see, but playing back somewhere in oblivion.
How can I prevent this all from happening? I've already tried with .text() and .html() but without success.
Related
On a project, i have an iframe and a link targeting it. The link leads to an mp3 file. However on google chrome, and maybe other browsers, the iframe appears with a horrible black background.
Is there any way to fix this?
All solutions i have found so far talk about changing the background in the source file, but this is not possible for me as it is an mp3 file not an html file.
You have zero control over the default presentation of an audio player when you link to it in this way. In fact, it's very common that the file will just be downloaded instead of played in a browser.
If you want to control it, you need to build an HTML page that loads the audio file.
Is there a good way of using JWplayer to instantiate a video tag in stead of a plain div?
Here's a support thread (https://support.jwplayer.com/customer/portal/questions/6062676-jw-player-not-working-with-video-tag), but basically JW admin comes back and tells the OP to not use a video tag at all.
This is the example markup from JW:
<div id="myDiv">This text will be replaced with a player.</div>
<script>
jwplayer("myDiv").setup({
"file": "http://example.com/myVideo.mp4",
"image": "http://example.com/myImage.png",
"height": 360,
"width": 640
});
</script>
SEO wise, this is utterly useless, the video won't get crawled if it's only instantiated into a plain div by JavaScript after page load.
What I want to do is to have a proper video tag on the page and then instantiate a JW player instance from it. This way the video tag is visible to crawlers without it having to execute JS (which not all do)
The JW Team removed the "support" for embedding over the <video> tag in the upgrade from JW5 to JW6, primarily because they were experiencing too many support issues with embeds failing as a result of conflicts between the initial <video> tag loading and what their code was trying to do.
I wrote an article in 2012 which explains the problem they were faced with: http://powered-by-haiku.co.uk/?p=1
Rather than fix it, they decided to go with the current embed into <div> solution.
Now, you can still technically embed over a <video> tag with JW6 and JW7 - you just need to ensure the "preload" attribute is set to "none" in the original tag, and that this video is also not set to autostart.
However, in terms of SEO using the current JW approach, there is still a way to allow search engines to index and show your videos in search - actually the biggest issue with the move away from embedding over native <video> tags is to do with accessibility - not SEO.
Check out https://developers.google.com/webmasters/videosearch/schema#adding-videoobject-to-a-video-page for details of how to add schema.org markup to your page to support video tagging.
Ideally, in time, JW will allow a built-in means to progressively enhance this Schema.org metadata and build a JW config object dynamically (like they used to do with the video tag) - as it stands however, you'd either need to do that yourself or duplicate the associated information.
Either way, the accessibility issue still exists!
I have a webapp written in HTML5.
The Home page contains a <video> tag.
The video is correctly played when I load the page for the first time, and if I use controls (pause, play, fullscreen) too.
In order to maintain the webapp always in the fullscreen view, I used only one html page, and when a button (or an anchor) is clicked, I hide the container div (representing the content of the logical "home page"), and show the selected one, when the "home" button is played I show again the original container div.
Originally, the video continued playing when I clicked a button to pass to another virtual page, so I pause it by jquery.
The problem is: only on iPad, when I come back to the first container (that means the home page), the video is no more available, I can't see the poster and the video itself, and the div is black screen.
Some notes I hope could restrict the problem:
The video is statically loaded in a <video> tag and source
attribute.
I've tried to start with an empty src and load it by
jQuery (as explained in many tutorials and in stackoverflow too), it's the same.
The same if I try to create a playlist in
which I select different videos and load the selected one in the
<video> tag using Javascript.
I also tried to reload the page with jQuery, but doesn't work.
The constant beahviours are the following:
Every technique I tried to implement is working well on PC with
Firefox and on the Mac with Safari.
The problem on the iPad appears only when I try to come back to the initial page.
I'm not convinced the problem depends on the technique of show/hide I used, but on the iPad behaviour. I've read some other ways to maintain the webapp in fullscreen view, but apply only to <a> tags (such as this:), I need div stylized as buttons (and managed in jQuery) too.
Thanks if someone can help
I think if you use flowplayer is better it is good implementaton that it work on IPhone and Andriod, it is free.
I'm having issues with my videos not being played back in firefox. I'm attempting to dynamically update one video element's source to play multiple videos without re-creating the element every time my function is called.
E.g., first click makes the video source = video1.mp4, next click maintains that video player, but changes the source = video2.mp4 without recreating the element.
My reason for doing this is to only have to use one filetype for all browsers. I realize I could just make another source tag under the video element and give it a MIME type of video/ogg and it would work with HTML5 in firefox, but I want to have a universal format to take the burden off my users.
I can get this to work perfectly fine in chrome, but when changing to firefox the flash player only plays the first video source then
for some reason becomes undefined.
Firstly, I created a video element inside a lightbox. The lightbox is opened through a function which is called onclick of an anchor tag. When the lightbox is opened, I initialize a videojs player of the video, then set its source to the URL passed into the function. I then load the player, and play it. This works perfectly fine in chrome with HTML5, but in firefox the flash fallback works once then breaks.
I was reading about the problem and thought my problem might be the fact that flash converts the video element into a flash object, then when I try to reference the video with the same ID again, it isn't found because it doesn't exist as a video element anymore.
Here is a code sample: http://jsfiddle.net/7WTrh/12/
I tested in chrome, and it works, but firefox does not.
Thanks for the help in advance.
When you're changing the source, you need to make sure you're passing the mime type as well, so video.js knows what tech it needs.
myPlayer.src({ src: "vid.mp4", type: "video/mp4" });
There's a section on my site where I display data from another site, using:
<embed src="URL"></embed>
I recently discovered that this works fine for most people, but that Firefox users get an error telling them they need to install a plugin. I searched around for a solution and people seemed to find that specifying the MIME type worked:
<embed type="text/html" src="URL"></embed>
But this isn't working. I can switch to iFrames, but I dislike how they display the information. Any other suggestions?
Per spec, embed elements are only handled via plug-ins or an SVG renderer (and in the latter case behave just like iframe).
You can do <object data="URL"></object>, but of course that will also behave like iframe...
I've been having the same issue with an html5 game. It appears that Firefox doesn't support if you want to embed an external html file. This tag should only be used for plugins.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed
To embed an external html file into another page in Firefox you have to use iframe or object tags instead. For the interactive nature of my external page I used iframe and it worked in IE / Chrome and FF, I had to make the margins larger than the game itself.