I'm building a website where you can open a modal view with a video-tag for the users web cam video.
Now I'm wondering what happens to my video stream/the content of the video-tag when the user closes the modal view (the view is hidden via display: none).
Is webRTC still running? Are the resources still reserved?
Thanks
Yes, even if you don't attach the received stream to any media element, the stream is still being played. This is valid for remote and local streams. Of course, if it has audio, you will only hear it when it is attached to a media tag (audio or video).
You can even remove media elements from the page. When they get back on dom, if you attach the stream, they will continue to play.
Related
I am retrieving tweets via the Twitter api and attempting to embed their video attachments.
Embed Code:
<video controls="">
<source src="https://video.twimg.com/ext_tw_video/1444247208514113546/pu/vid/1280x720/6rw0rzMWMSk39eoz.mp4?tag=12" type="video/mp4">
</video>
Firefox:
The above code fails to render the video player altogether in firefox, choosing instead to simply return: No video with supported format and MIME type found.
Note: There is no issue in playback when the video url is entered directly into the address bar.
Chrome:
Chrome spontaneously stops playback after 0-4 seconds, returning to the first frame. This behavior is somewhat sporadic, occurring sometimes, but not always. When it does occur, no matter how many times the play button is pressed, the video is unable to progress any further. Once a video is in memory and has been successfully loaded by refreshing the page, it no longer behaves in this way. Like firefox, there is no issue in loading or playback if the video url is entered directly into the address bar.
Video demonstration:
Some more examples of twitter videos to play with:
Many site issues such as the No video with supported format and MIME type found error can be caused by corrupted cookies or cache.This can cause streaming problems in any browser
Firefox Solution:
I suggest you Clear the Cache and Remove Cookies in your settings
Warning ! ! This will log you out of sites you're logged in to.
To do this enter about:preferences in the url bar.
To clear Cookies: Select Privacy under History, then select Firefox will Use Custom Settings. Press the button on the right side called Show Cookies, then use the search bar to look for the site. There may be more than one cookie in use for this site. Remove All of them.
To clear cache: Select Advanced > Network. Across from Cached Web Content, Press Clear Now.
If there is still a problem, Start Firefox in Safe Mode {web link} While you are in safe mode;
Then restart.
Chrome solution:
At the top right, click the More button
Navigate to More tools > Clear browsing data .
At the top, choose a time range. To delete everything, select All time.
Next to Cookies and other site data and Cached images and files, check the boxes.
Click the Clear data button.
I've managed to cast a LAN hosted dashboard page to the chromecast, using https://boombatower.github.io/chromecast-dashboard/sender/.
However, the HTML5 video tag will not play without the muted attribute (and trying to unmute causes it to pause). Here is the error: "Unmuting failed and the element was paused instead because the user didn't interact with the document before". It has to do with Chrome policy, of course.
Is there any way to cause interaction with the Chromecast to perhaps allow unmuting? I've tried to press the pause button on my TV to send an event via CEC (it works on the media controller), but the videos still get muted.
I figured it out. I need to mark the video element using the chromecast api. So I had to create my own Cast app.
There isn't a way to do this with the given dashboard app. It wraps the user's page inside an iframe, and there is just no way to access the chromecast api from inside.
I just wondering how youtube displays the Video on their web app without the tag?
I also want to implement that kind of technique from my other future web apps.
TL;DR
It's because the video is streamed asynchronously, and not loaded at once. In HTML you will only find a player-container, which is a placeholder for the frames to be fed into it.
A bit more
When you click on a video, the metadata of the video loads first (title, description, etc.), then the stream flows through a socket, depending on the settings you have.
If there were a a fixed source in the HTML for which the video is loaded, changing the settings (playback speed, resolution, etc.) would have resulted in a page refresh!
In addition, YouTube prevents un-permissioned video downloads for a while now, another reason why not to provide a direct source to the video blob.
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.
Is there a way to access/listen to the previous/next buttons in the iOS HTML5 video player? Ideally I would listen to some sort of a prev and next event and swap out the videos accordingly without the user having to close the video and click my prev/next buttons.
(source: iphonefaq.org)
I am currently using jwplayer to generate the html5 video and listening to their playlist next/prev listeners don't seem to do the trick. I can always find and attach listeners to the actual <video> tag pretty easily though.
If you attach listeners to the video tag itself then when the user hits next and previous then the listeners in the code will put up on those buttons. I am doing something similar with youTube videos. If you hit next it goes to the end of the youtube video and fires a video complete event tag and then I load the next video when that is called, so that the video will one loop without the next button and two the users can hit the buttons. I have not found a way to monitor the buttons in the player on the iphone side, but if I find it I will post that as well since it is important to know both angels if possible.
Funny thing I think I am looking to try and do the same exact thing. I know how to transition the videos to the next without having to leave the fullscreen mode because of using youTube api in the js but I am not able to observe the quicktime player itself and need to for another feature that I would like to work on.
That's the native iOS player which is a thin version of Quicktime. You'll know if it's an HTML5 player when it doesn't transition from the Quicktime player and your page in Safari. How is your movie being embedded?
I recently had a similar problem and was unable to find a solution using the HTML player. I ended up implementing the video player using MPVideoPlayer Framework and launching it from my web view with a custom URL scheme (AppName:Commnad:Asset). I was then able to use the delegate methods to monitor user interactions. If you would like to see basic implementation, let me know and I can add some code.