I am trying to build a web application that lists videos. I have a problem with internet explorer.
Here is my view
<div class="col-lg-3 col-xs-12 col-md-6" ng-repeat="video in videos track by $index">
<video>
<source ng-src="{{video.url}}" type="video/mp4">
</video>
</div>
I am lazy loading videos on controller side. Each scroll bottom adds 4 new elements to videos.
videoFactory.load($scope.videos.length, 4).then(function(res){
$scope.videos = $scope.videos.concat(res.data.data);
});
And everything works fine on all browsers except internet explorer 9 to Edge.
Please look at Internet Explorer network. Everything was fine but suddenly all response headers changed to 206. Video with the name "iPhone_7" was loaded before with the size of 7,04MB but now it is partially loaded with 6,77MB.
This problems starts after 32 videos are loaded succesfully. And the video error code is 4 which is MEDIA_ERR_SRC_NOT_SUPPORTED.
Related
When I uploaded my mp4 to my Amazon S3 Bucket I allowed public access through my permissions. The mp4 loads perfectly fine in my pc browser, but when I try to pull it up on my iphone it does not seem to be reading the S3 object correctly.
The object url is: https://numeros1422.s3.amazonaws.com/Black+on+white.mp4
That url pulls up a video on pc but has issues when pulling up on iphone.
Thanks for the help in advance!
Amazon S3 serves the content of the object the same regardless of which browser is used.
However, how the mp4 file is interpreted will depend upon the browser being used. Some browsers might choose to display it, some might choose to download it. It might also be a factor of the memory available on the particular device.
Typically, mp4 files are not served simply as a web page. Instead, they are referenced in the HTML.
Here's an example from w3schools - HTML Video:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
This tells the browser to display a video within an HTML page.
I am trying to embed an MP4 into a Grafana dashboard on an Ubuntu 18.04 server. I have entered this into the "text" dashboard in HTML mode.
<video width="320" height="240" controls autoplay loop>
<source src="/home/testing/Downloads/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
This shows the controls but does not show the video. When I put the same code in an html page on its own, however, the video shows as expected.
I have also placed a video in /var/www/html but this fails to show too.
What am I doing wrong here?
As mentioned in comments the correct way to do this would be to move the video into the grafana public folder and serve it from there.
On the grafana server, move the video to /usr/share/grafana/public/video , you will have to create this folder first (owned by root and perms 755)
Then within the panel, your html would simply be
<video width="320" height="240" controls autoplay loop>
<source src="/public/video/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
All script type tags were disabled in a previous version of Grafana for security purposes. To enable them, un-comment this line in /etc/grafana/grafana.ini - it's near the bottom.
;disable_sanitize_html = false
Then set it to true
disable_sanitize_html = true
Worth bearing in mind that this could be a significant security risk. Do so at your own risk.
This will enable the video tag as well as iframe, so you will also be able to embed YouTube videos. Unfortunately, I have not been successful in getting either local or YouTube video to loop, so YouTube live streams seem to be the best bet. I currently have a Grafana dashboard playing Sky News, for example.
As #tomgalpin has noted, you can put a video file in /usr/share/grafana/public/video so that Grafana can serve it. I'd stick with YouTube if possible though.
In a panel plugin, put your mp4 in src/img/ and use this in your ReactJs component:
<video src="/public/plugins/your-plugin-name/img/sample-mp4-file.mp4" width="320" height="240" controls loop></video>
I have this code and I embed a Youtube playlist to my website
<iframe width="300" height="165"
src="PLAYLIST_URL?autoplay=1&showinfo=0&loop=1&list=PLAYLIST_ID&rel=0"
frameborder="0" allowfullscreen></iframe>
This works in desktop and it auto play and loop. But I can only listen one track in mobile and does not auto play (iPhone 4S, iOS 7).
This is my webpage : www.hqtunes.com
How can I fix the embed code and can auto play and loop, like on desktop?
Based this thread, autoplay cannot be done on iOS and Android devices. For various reasons (including, but not limited to data usage), Apple doesn't allow auto-playing of videos. You may also check this documentation which stated that "Warning: To prevent unwanted downloads on mobile networks at the user's expense, playback of embedded media can not be launched automatically in Safari for iOS, and only the user can start playback."
Spent a few hours today trying to figure this out, hoping someone can enlighten me. I have a video hosted in Azure Media Services that I am calling a Web Service to get (using WebApi and Angular). The issue I am running into is that the video is not actually playing. Here is the View code in Angular I am using
<video id="{{video.RowKey }}" class="azuremediaplayer amp-default-skin amp-big-play-centered embed-responsive-item" controls data-setup='{"logo": { "enabled": false }, "techOrder": ["azureHtml5JS", "flashSS", "silverlightSS", "html5"], "nativeControlsForTouch": false}'>
<source src="{{vm.trustSrc(video.BlobUri)}}" type="application/dash+xml" />
<p class="amp-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
</p>
</video>
And for completeness, this is what vm.trustSrc does
vm.trustSrc = function (src) {
return $sce.trustAsResourceUrl(src);
}
The Html rendered looks like this
<video id="a273bf71-4b1f-439a-8f98-31d112511d8f" class="azuremediaplayer amp-default-skin amp-big-play-centered embed-responsive-item" controls="" data-setup="{"logo": { "enabled": false }, "techOrder": ["azureHtml5JS", "flashSS", "silverlightSS", "html5"], "nativeControlsForTouch": false}">
<source src="https://testams.streaming.mediaservices.windows.net/6236bb64-cda4-4a05-960c-ae957729cf61/testvideo.ism/manifest(format=mpd-time-csf)" type="application/dash+xml">
<p class="amp-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
</p>
</video>
I have tried a few different types (including application/vnd.ms-sstr+xml) and none of them play the video. I know this works but in my situation I cannot get it to work. I have looked through every tutorial and sample code I have came across and nothing seems to get me where I want. Any help would be greatly appreciated.
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