I'm currently working on a eLearning website where I use html5 video tag to show video tutorials to my users. I'm using the video streaming technique explained here:
https://getpocket.com/redirect?url=http%3A%2F%2Fstudentguru.gr%2Fb%2Feloy%2Farchive%2F2015%2F07%2F13%2Fvideo-streaming-for-mobile-clients-via-asp-net-web-api-2-tutorial.
After I implemented this solution everything works fine, but after a while I realized while video is playing using html5 video tag in chrome, other requests that are sent to the same server, stays pending for a long time. I don't have this issue on other browsers link Firefox. This is because of a specific bug in chrome (https://github.com/videojs/video.js/issues/455). This is a major problem for me because while users are watching videos on my website, I use ajax to save their progress and this issue prevents that. Do you know any workaround to fix this issue? I have used solutions in HTML5 video element request stay pending forever (on chrome) and none of them solved my problem.
Thanks in advanced.
Related
I am using an iframe on my React app. my problem is that in development and production the iframe content isn't loading on my pc or cellphone. The thing is that it does work on some other devices.
In addition to that it does work on Edge on all devices.
The webpage that should be displayed is also written in React.
I haven't found any mention on google of this problem.
What could cause such weird behavior?
I am on iPhone and it cannot access the camera from chrome. Is there any solution?
Error Message: "Unable to access video stream (Please make sure you have a webcam enable)"
source code "https://github.com/cozmo/jsQR"
Demo (I copied the same code from Author's demo)
This problem solved itself in an update of chrome. FINALLY! Safari is still better because It allows the user to save the setting and it never asks about the camera again for that particular url. Using QR codes in the browsers has allowed me to write "apps" in a browser and avoid the red tape of the big tech app stores.
I have a web frontend that's able to obtain a MediaStream from a remote RTCPeerConnection.
Once I get this stream, I pass it to a <video> tag with autoPlay set.
(Note: the frontend is in React, so we pass the stream as an srcObject with a ref.)
Everything works fine in Firefox.
In Chrome, the video is only displayed if I do this at application startup:
call navigator.mediaDevices.getUserMedia({ ... }) with either audio or video set to true
take the MediaStream returned by getUserMedia, and keep it in a global or top-level variable
Now, that does not make any sense to me since:
I don't want to ask users for permission to access their microphone or webcam in order to display a video
This only happens in Chrome, and Firefox works fine
This happens both on localhost and https:// "public" domains, so it's probably not a security issue
This does not seem to be affected by playing with the autoPlay, controls, etc... attributes of the <video> tag.
Anything obvious I'm missing here ?
Chrome introduced autoplay restrictions in 2018. These are not in effect when getUserMedia is active.
If your application logic works when Chrome is started with --autoplay-policy=no-user-gesture-required this suggests this is the case. The article also has some background information and possible workarounds like introducing a user gesture.
(and no, these restrictions don't make sense...)
I'm developing a web application with AngularJS and I'm using a directive for embedding responsive Youtube videos called youtubeResponsive which allows to embed videos in an iframe with a video id as source parameter.
It all works perfectly on desktop browsers, in fact I also managed to embed a playlist and play it in a loop.
The problem I'm having is now on Chrome Android, on a Nexus 5 device (running Lollipop latest update) the video embedded is not showing and instead I can see a notification of a download going on. Every time I refresh I see the download process restarting but no video is showing. If I click on the download notification to see the file nothing happens.
Of course my aim is to display the video also on mobile with autoplay and loop active.
The output which I can see inspecting the page on mobile using USB debugging (chrome://inspect/#devices)
<iframe id="ytplayer" type="text/html" width="100%" height="202.5" ng-src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque" frameborder="0" allowfullscreen="" video-slug="ZhfUv0spHCY" class="ng-isolate-scope" src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque"></iframe>
I don't see any error on mobile except the same warning I can see on desktop which apparently is not blocking the video from playing at least there.
Resource interpreted as Document but transferred with MIME type application/x-shockwave-flash:
"https://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque".
Anyone experienced the same issue on Android Chrome or on other mobile devices and OS ?
I haven't started testing on AOSP or iOS yet but already on Chrome the issue is quite concerning. Let me know if anyone managed to fix it.
You're specifically requesting the old Flash player widget and not allowing it to upgrade to HTML5, which is required now for mobile support of any kind. You should switch to the YouTube Player API, which requires a few extra lines of code to implement but will work almost anywhere and give you a lot of event data back about videos playing, etc.
https://developers.google.com/youtube/iframe_api_reference
You can still use an IFRAME with this technique, although consider this directive which appears to support the current API:
https://github.com/brandly/angular-youtube-embed
I've ran into an issue with Safari on iOS 5.1.1 and Angular where I am doing paginated results. After I decide to leave the page that is hosting the app, and then come back to the page by using the browser's history back button.
The application is not initialized so as I scroll again, the pagination functionality is not triggered.
Since 5.1.1 doesn't provide a web inspector, I had to rely on console.log to print events that I want to see that it's executing. On initial load, I see everything ok, but when I am back through the back button nothing fires.
My usual ways of fixing this are not working. Here are the things I've tried:
Used manual bootstrapping of Angular app
Made the page not support caching and expire the page as soon as it's rendered.
Neither of these helped, which is why I am here asking for some suggestions. Unfortunately it's not a very easy thing to replicate through a Fiddle or a hosted HTML file so I am unable to provide one. Hoping that some of you may have experienced this before.
Thanks in advance for any help.
Answer is quite late and I hope you found a solution already but it might be useful for others.
Unfortunately I won't be able to answer why the app is not initialized (due to the lack of code) but I can give you some tools/tips to ease the debugging (assuming you have the iOS simulator).
Debuging on mobile safari can be done either :
with weinre and get the features of the web concole,
or by enabling remote debugging in Mobile Safari itself, see here
Yea, same problem here with iOS 7. It must send the DOM structure over before running any javascript. Kinda pointless...
Since the problem is with mobile safari and since it supports popstate event, you can use this event to detect when the user is back in combination with $location.path(), for example:
$(window).bind("popstate", function () {
alert(location.pathname + $location.path());
});