I am trying to display a TVHeadend stream in the browser as a pre-cursor to get this running on my TV. So I whipped up this sample HTML code where 192.168.0.4 is my server running TVHeadend and the channel UUID is 3df2b09783d8afeb8a323f5025431df7:
<html>
<body>
<video width="720" height="567" autoplay="true" controls>
<source src="http://192.168.0.4:9981/stream/channel/3df2b09783d8afeb8a323f5025431df7?profile=webtv-h264-aac-matroska" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>
Whether I show the HTML page locally on my computer or served via a local Apache webserver, the result is always the same: I get an emtpy video player control. The network tab does not show any errors, neither does the console. It does bring a warning however:
"Empty src!"
However the src is clearly not empty.
When I copy the src URL to my browser (Chrome) and call it, it starts downloading the stream (instead of showing it, but that might be expected). Why does the video control not seem to be able to show the video?
Do I have any other debug options I can check out? This problem has bugged me for a while now and I have tried to drill down to the source of it by removing the TV SDK and all other side code just to see if the actual video will play (which it does not).
At first I thought it might've been an authorization issue but then why does Chrome seem to be able to download the stream just fine? I have logged on to TVHeadend in the same browser (in a different tab) to make sure that a missing logon is not in the way of things.
I have also tried putting : in between the "http://" and the IP address to pass the parameters required for basic auth - but to no avail.
Does somebody have any hints as to what might be the roadblock here?
Related
I am trying to programmatically retrieve the contents of the chrome://gpu url.
As a start I tried to load up chrome://gpu from the command-line, but chromium refuses to start up with a url that is prefixed with a chrome: prefix.
Then I tried to out-clever that limitation by using a redirect page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="7; url='chrome://gpu'" />
</head>
<body>
<p>Please follow this link.</p>
</body>
</html>
But that page, although it can be launched from command line, would not refresh for me.
Even clicking the link does not work, which leads me to determine that you cannot link to chrome://gpu at all.
When I tried right-click open-in-tab on the link, I get:
Which means that chromium is actively blocking access to it, unless it is typed out by the user.
I have two questions:
Can this block be disabled?
If not, how can I retrieve this information programmatically? Can I somehow feed artificial keystrokes into chromium?
Update 1
Tried to add virtual key-strokes with:
$ wtype test
Compositor does not support the virtual keyboard protocol
Update 2
I have gotten further: I can use ydotool to make chromium browse to chrome://gpu and then do Save-As, but that saves a nearly empty html page that references a gpu_internals.js script.
Is it possible to save the output of that script instead?
Access to the "chrome://gpu" URL is restricted and cannot be directly accessed programmatically. This restriction is in place to prevent malicious actors from manipulating the internal settings of the browser.
An alternative approach could be to use a headless browser like Puppeteer or Selenium to automate the process of retrieving the information from the "chrome://gpu" page.
I've found ydotool to be a good solution for this.
With it, you can automatically open a page to chrome://gpu and then click in the browser window, followed by Ctrl+A, Ctrl+C to retrieve to contents to the clipboard.
You can then use wl-paste from the wl-clipboard package to get it.
I alredy change the favicon.ico to the logo file which I want to use In Vue-cli's public folder, and named it the same file name.
In web browser the Favicon and title be changed successful
but in the mobile browser neither safari or chrome are fail
I didn't use pwa so probably not have manifest.json problem
And I already tried to clean both browser's cache or open it on Incognito Windows, but still the same, is anything I neglect to do with my index.html or vue-cli config?
You can add <link rel="apple-touch-icon" href="/custom_icon.png"> so that your favicon is shown when you favorite the page or view it in that tabs view. This is mentioned here.
For the webpage itself its very likely your iPhone is still caching the old icon regardless of your attempts to clear said cache. In my experience trying to load the page with no network connection, waiting for the time out error and then connecting to the network and reloading the page is the best way to "force" the device to clear its cache. Alternatively with the dev tools open and a keyboard attached type command + option + r. If not, patience, it'll update... eventually.
Here is the link to the bigcommerce store I'm working on. It shows background video on all the devices except IOS devices on any browser.
https://axict.mybigcommerce.com/
Looking for help in this weird issue.
Thanks in advance.
Here is the video element code,
<video id="bannerVideo" class="bgVideovideo" autoplay loop muted playsinline>
<source src="https://store-1anxrygvum.mybigcommerce.com/content/banner-video.webm"
type='video/webm;codecs="vp8, vorbis"' />
<source src="https://store-1anxrygvum.mybigcommerce.com/content/banner-video.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
Your browser does not support the video tag.
</video>
From a quick check this actually does not work on Safari on MacOS either and it does on Chrome on the same Mac.
Looking at the network traffic you can see the server responds with a '200' to the byte range request from the browser for the video, which Safari does not handle well, although Chrome does:
The most common root cause of this issue appears to be servers that are not configured to handle range requests in what Safari consider the correct manner. It expects to see a '206' response when it sends a request with a byte range.
There is more discussion and examples in the answer here: https://stackoverflow.com/a/32998689/334402
Looks like you've uploaded the video to WebDAV - just like Mick's answer, the file hosting server that BigCommerce WebDAV uses is not configured to send the correct request type that IOS/Safari is looking for when loading a <video> element's source.
When I ran into this, I had to upload the video to AWS S3 Storage. You should be able to get 5GB permanently on the free tier.
I have a webpage with a tag on it with the following markup:
<video width="456" height="360" controls autoplay>
<source src="Movies/Intro.mp4" type="video/mp4" />
<source src="Movies/Intro_H264.webm" type='video/webm; codecs="vp8.0, vorbis"'/>
<source src="Movies/Intro_H264.ogg" type='video/ogg; codecs="theora, vorbis"'/>
</video>
If I visit this page in IE10 it renders the video player but with an error message that reads: "Error: unsupported video type of invalid file path"
But what's odd is if I right-click on the video box and choose, Copy video URL, and then open a new tab in IE and paste in the direct URL to the video file (Movies/Intro.mp4) it plays in the browser without issue.
Also, I can visit the page using Chrome and it plays the MP4 video from the webpage without issue. All that to say, I don't think there's any issue with the video file itself or the encoding, but why is IE 10 not playing the video when it's in the tag, but it is playing it when requesting the video directly?
Any insights?
Thanks
I would check whether the mime-type is correctly being returned for the file.
Chrome will play correctly regardless of the MIME Type returned.
To check:
Press F12 to display the IE Tools Window/Pane.
Go to the Network Tab
Click Start Capturing
Browse to the page in question
Find the mp4 line
If the Type is displayed as application/octect-stream then this is your issue.
I had the same issue with IE 11 and the problem was the content type was application/octect-stream as stated by csmith. I was serving my videos from Azure storage and apparently that is the default content type.
You can change the type with Azure storage or using Azure api as shown in the post
Set Content-type of media files stored on Blob
Here is a guide for people on Amazon cloud (I did not test it)
Changing content type for Amazon
Make sure you set the web server to use MIME type video/mp4 for .mp4. I accidentally set .mp4 to use MIME type video/mpeg, the video plays in Chrome, but not in IE11.
I had this same issue which was a real pain in the ass. My solution was actually quite simple (after searching on the internet for about 4 hours).
Add this line (specific for IE) to your .htaccess file.
AddType video/mp4 .mp4 .m4v
When you paste the URL to your browser it doesn't use HTML5 player anymore, so it doesn't say that it is really a supported file; only that the file path should be valid.
According to wikipedia, IE10 supports (not only) H.264 for video and AAC for audio - these are very common formats for mp4 container. Chrome's support is much wider (video- and audio-wise).
The problem is that the Intro.mp4 file might have different formats altogether (the file could by just renamed or created using unsupported formats).
I'd look into the file using properties->details or third party programs (for example Media Info).
I don't think it is IE10's issue. The only similar one I've found is when the user was too specific using unsupported format of used codecs ([...] type='video/mp4; codecs="H.264, AAC"' [...]).
Now it is very easy to update mime type for your videos on amazon s3,
Just login and navigate to your file, under preferences you will see metadata, there you can edit content-type
Save it and reload your page.
If it directly plays find when you put the .mp4 URL into the browser make sure it's not running with the Quicktime plugin which you may have installed (especially if you use iTunes). Right click on the successfully playing video to rule that out. If it comes up with menu items related to Quicktime you may want to disable Quicktime plugin in adins and continue troubleshooting.
Sample MP4 video: http://www.w3schools.com/html/mov_bbb.mp4
I have a site with an embedded YouTube Flash (AS3) player, and it's no longer working in Safari.
Check out this fiddle, the code for which is merely:
<object type="application/x-shockwave-flash"
data="http://www.youtube.com/apiplayer">
</object>
In Chrome, Firefox, and IE, the request to http://www.youtube.com/apiplayer returns normally (200). In Safari, the server returns a 303 to https://youtube.googleapis.com/apiplayer.
This player loads, but I am unable to interact with it in JavaScript. I assume that's because it's served over https — though I am explicitly requesting http — resulting in a mixed-mode security issue. Here's error I see when trying to do anything with the player (this is with the full chromeless player embed code):
>>> player.playVideo()
Error: Error calling method on NPObject.
If I change Safari's user agent to something else, or even just mangle the word "Safari", then the correct player is loaded. I also have no trouble loading the Vimeo and Viddler players (http://vimeo.com/moogaloop.swf and http://www.viddler.com/player/key).
I see this both in the stable Safari release and in the WebKit nightly. It also occurs with my extensions disabled and in Private Browsing mode.
I tried working around it by embedding http://youtube.googleapis.com, hoping that there would be no redirect and I'd get the player over http. But it still redirects to https, and it does so in all browsers.
I filed this YouTube API ticket last week, but there's been no response so far.
Seems like there's a playback issue with Safari and YouTube. There're multiple solutions suggested at MacRumours http://forums.macrumors.com/showthread.php?t=1098606, like switching to 32 bit browser, use non-HTML5 version, etc.
One that seems to work is below:
Select Safari > Preference > Privacy > Details
Search for Youtube
Delete the cookie called youtube-nocookie.com then click Done.
Restart Safari and try again.
The YT API bug report has been answered, and there is a workaround: appending the version to the URL:
<object type="application/x-shockwave-flash"
data="http://www.youtube.com/apiplayer?version=3">
</object>
Apparently when the version is not specified, they fall back to the AS2 player for Safari only. I'm not sure why that would force the switch to https, but regardless, this works.