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.
Related
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>
Ok this has me wondering what have I done, either reactjs/nodejs is turning my perfect html5 app into a flash app.
without my knowledge or Opera GX thinks it needs to play audio files through a flash plugin.
It is basically stopping autoplay due to the fact that users need to allow flash before the audio will play (unless they click the play button)
Can someone please explain to me why or how this is. and what I can do to correct this?
to clarify my audio tag is
<audio id="player" autoPlay>
<source src="StartOfTrevda.mp3"
type="audio/mpeg"
/>
</audio>
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.
Ok, so in our 'innovation lab', there is currently a push to use Ionic, an hybrid app framework built on top of Cordova for native access and angularJS for the ‘web code’.
There are also some projects which are pure mobile web, using Angular + bootstrap for responsive design for example.
The thing is some projects coming up will need to have both a mobile web site and native apps (ionic hybrid). Most features and screens will be the same, sharing back end and most of the UI but there still will be some difference.
So my question is; How to architecture a project so that it can be both an ionic project and a normal angular website with 2 different deployment approaches. Most of the code being reused but some views for the mobile website and some views for the hybrid app (using more native components and conventions), maybe some routing differences as well.
Is that even a good idea?
And in the shared code, is there a simple way to know in which case you are? some IF, some directives inactive outside of their context, etc.
It feels like there is some sort of missing link i may be unaware of.
Thanks in advance.
I'm working on this same problem. The approach I'm taking is to use separate templates, and when possible, key CSS off the device detection classes ionic adds to the body tag.
Desktop version (default)
.your-style
Mobile Version
.platform-webview .your-style {...}
.platform-cordova .your-style {...}
There's a repository on on Github that might offer some guidance.
https://github.com/jonathanwax/jw-ionic-desktop
To quote from of the source code from his project, you would create a folder for each view with the mobile version of the template.
For example your bootstrap desktop version of template.html could look like this:
<div class="container">
<h1 class="text-danger" id="helpHeader">Help Needed?</h1>
<li ng-repeat="help in vm.service.data"> {{ help.title }} - {{ help.content }}</li>
</ul>
<pre dir="ltr">HelpController: {{vm|json}}</pre>
And a ionic mobile version of this same template could be located at mobile/template.html
<ion-view view-title="Help">
<ion-content>
<ion-list>
<ion-item ng-repeat="help in vm.service.data">
{{ help.title }} - {{ help.content }}
</ion-item>
</ion-list>
</ion-content>
You could create a conditional to work with your router to serve the mobile template if you're in a cordova/mobile environment. I feel like maintaining two templates could be development hell. Which is why ionic snubs its nose at developing for the desktop--this is hard work! And prone to bugs. It's pretty much a flytrap ( ya know for bugs :) ).
We could try writing templates with conditionals, but I suspect different files may have less overhead.
A conditional approach to templating:
Test for mobile environment
var isMobile = ionic.Platform.isWebView();
In the template or view html:
<{{isMobile ? 'ion-container' : ' div class="container"'}}>
Or a use an ng-switch:
<div ng-switch="expression">
<div ng-switch-when="isMobile">
CODE FOR MOBILE HERE
</div>
<div ng-switch-default>
CODE FOR DESKTOP HERE
</div>
</div>
Depending on your application, you can get away with using ionic directives for most of your desktop application. You can sprinkle in desktop styling when needed. There's really not a huge amount of code that would actually need to be served by a different mobile/desktop template.
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