I am working on project which is generating videos using a player. Using the HTML tag <div id={renderId}> , when I render the div element with a dynamic ID then I see the video , in case I change to static value it doesnt render .I am not sure why it happens.. There is only 1 video on the page .
When the value of renderId is new Date().getTime() I see the video works fine on the page.
when I set it to abc or any fixed value, there is no video on the page.
This is a React application with Next.JS
Related
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 have multiple, 6 second video banners with an unmute button looping on the same webpage with AS3. They work fine when viewing in flash player, but when I place within the html page and upload it (via cms) onto a testing server, they only play correctly when the swf is in browser view. Is it possible to have the swf's to play continuous and not stop looping when out of view?
I’m using the HTML5 video element to display video on my asp.net page.
How can I display multiple videos one by one?
You need to set the change the src attribute of the video once the each video is ended.
Check out my fiddle where I have done this: JSFiddle
I am trying to figure out how to format a posted youtube link so that it embeds video but does so in a new browser window (the page auto refreshes every ten seconds, so embedding video directly onto the page is a problem. Also, I'm aware that it would be smarter to have the page update asynchronously, but I'm not there yet.)
So, for example;
1) A user posts the link https://www.youtube.com/watch?v=examplevideo. I can use a regex expression to change it so that it can be an embedded video on the page, but because of my limitation, I would need it to be an embedded video on a new page. So, instead, I would change this link to be;
2) http://img.youtube.com/vi/examplevideo/0.jpg. This image (standard syntax for all posted youtube video) would be posted on the page instead. In clicking this image, it would open a new tab or browser and start playing an embedded video for that new page. The syntax for the embedded video, consistent with this scenario, is;
3) <iframe width="560" height="315" src="//www.youtube.com/embed/examplevideo" frameborder="0" allowfullscreen></iframe>
So, I know that I can use "a href" syntax to add a link to the image so that anyone who clicks on it will be taken to the link on youtube. I'm assuming that a similar method would be used to point to a new browser page with the embedded video on it? How would this work?
Set the target attribute of the a element to _blank to open it in a new tab or window.
Example:
<a href="http://www.youtube.com/embed/zX54DIpacNE" target=_blank>Clicky</a>
Although IMHO it's better to just link to the youtube page of the video instead of embedding it since you are opening it in a new tab already.
I have been trying to make my own customized video player for a website, but i don't really get how you are supposed to do. I've watched video's on youtube how you make your own flash player, but they embed the video in it in flash and there must be another way, like creating the player design, then having a html tag telling the video path and stuff. I've seen other video sites like movpod (i use it to watch stuff like the simpsons :p). They have an object tag in their site with the .swf player (design), but if i go to that file, it only shows up the design of the player, not the actual video. They are then using param tags to define the path to the video in the page. My question is, how do you make the player design, without importing a video in like flash cs5 or something, using said said object tag to the design, and params to define what actual video you want to watch.
The params passed are usually FlashVars. It's basically a Parameter in the object or embed tag defining some variables you can access in Flash, i.e. the adress of the video to play. See http://www.permadi.com/tutorial/flashVars/index.html example 1
In Flash then you read the address to the video and load it, i.e. using a FLVPlayback object.