How do I programmatically play a youtube video embedded with swfobject registerObject method? - swfobject

Does anyone have experience embedding flash with swfobject? Dynamic publishing worked as expected, but using their static publishing method, I couldn't control the player programmatically. Here's a description of what I tried
What steps will reproduce the problem?
Embed video using static publishing method from here: http://code.google.com/p/swfobject/wiki/documentation
use registerObject with a callback to capture the reference to the object
try to use any of the methods from the youtube api such as loadVideoById() or play() https://developers.google.com/youtube/js_api_reference
those methods are undefined in the object reference returned in the callback passed to registerObject
What is the expected output? What do you see instead?
these methods work if I use dynamic publishing
I was expecting to be able to use all of the methods listed here just as I can with the dynamic publishing method.
What version of the product are you using? On what operating system?
2.2 mac osx firefox and chrome
Please provide any additional information below.
code snippets:
js:
swfobject.registerObject("myMovie0", "10", "", function(e){
//try to do something with the player
e.ref.loadVideoById(videoID);
e.ref.play();
});
html:
<object width="425" height="356" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="myMovie0" style="visibility: visible;">
<param value="http://www.youtube.com/v/_DofZYPYOxM?enablejsapi=1&playerapiid=ytplayer&version=3" name="movie">
<!--[if !IE]>-->
<object width="425" height="356" data="http://www.youtube.com/v/_DofZYPYOxM?enablejsapi=1&playerapiid=ytplayer&version=3" type="application/x-shockwave-flash">
<!--<![endif]-->
<p>You must have flash installed to see this video</p>
<p><img alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"></p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
Thanks!

Related

Shaka player cannot load HLS on google chrome

I'm trying to load a VOD on shaka player.
this is my Url:
https://5b48f8f32d3be.streamlock.net/023a27950bd44774/mp4:22436e792e8b42de_HD.0.mp4/playlist.m3u8
I keep getting 4032 error in the console and I've searched a little bit about it. In the shaka document, the 4032 error has mentioned as CONTENT_UNSUPPORTED_BY_BROWSER. But when I'm testing my URL on the shaka player test URL everything is working fine.
https://shaka-player-demo.appspot.com/demo/#asset=https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd;lang=en-US;build=uncompiled
if my browser was the problem, it shouldn't play on the test URL too.
What should I have to do to shaka support HLS?
Much of the HLS content out there has MPEG2-TS streams, which many browsers don't support. To work around this issue, Shaka Player supports transmuxing TS to MP4 so the browser can play it. This is done using the mux.js library. This library needs to be loaded in a separate script tag before Shaka Player is loaded. For example, here is how the Shaka Player demo does it.
Add this two files in the index.html file.
<script src="https://cdn.jsdelivr.net/npm/mux.js#5.5.3/dist/mux.min.js"> </script>
<!-- Load the Shaka Player library -->
<script src="https://cdn.jsdelivr.net/npm/shaka-player#3.2.2/dist/shaka-player.compiled.js"></script>
This should be able to transmux MPEG2-TS streams to MP4 so they can be played in browsers that don't support it. And this helps in changing the resolution of the video.
And use const shaka = require("shaka-player/dist/shaka-player.ui.js");
instead of shaka-player package.

Angular CLI RTMP Video player not working

I've been trying to stream a rtmp video on Angular, but for some reason it doesn't work
my code is
<link href="http://vjs.zencdn.net/5.19.2/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="video_rtmp_url" type="rtmp/mp4">
</video>
<script src="http://vjs.zencdn.net/5.19.2/video.js"></script>
The result I get is this:
Obs: I've ran the "npm install --save videojs" command
ObsĀ²: i'm using ruby on rails on the background, there's no direct relation between it and the video player yet, but on the rails views, the exact same code works fine
ObsĀ³: There's no error or something related on the console
Besides that, what are the other options to stream RTMP on Angular?
Thanks!
The HTML5 tag does not support RTMP protocol.
RTMP was originally an Adobe protocol and flash players did support it.
Some HTML5 Javascript based video players, such as video.js that you are using, will support RTMP, but they generally do this by falling back to flash so you must have flash installed and available for it to work in this case.

porting chrome extension to firefox webextension - unsafe angular image call

I've got a chrome extension working nicely w/ a popup, but can't get local images in the popup to render in the ported firefox webextension. the popup renders no images and the HTML rendered is:
<img ng-src="assets/img/start_your_day_right.png" src="unsafe:moz-extension://d45045df-43fa-654a-b95c-70de00a23f5a/assets/img/start_your_day_right.png">
After researching this error, I've tried various permutations of the CSP setting in the manifest.json file. Here's the code in the manifest file I've used (also included is the web accessible resources, which was recommended as well):
"web_accessible_resources": [
"assets/img/*.png"
],
"content_security_policy": "img-src 'self' 'unsafe-eval'; script-src 'self' 'unsafe-eval' https://www.google-analytics.com; object-src 'self'",
I'm rendering the image w/ angular in the popup.html page:
<img ng-src="{{ tile.imgSrc | htmlSafe }}" />
(where 'tile.imgSrc' renders to a relative path link to the image - eg. 'assets/img/start_your_day_right.png'.
I've tried including various permutations of the img-src setting, including 'unsafe-inline', removing 'self', etc.
The error I can't seem to escape is:
screenshot of ffox console error
I'm running the latest version of FireFox (52.0) w/ an older version of angular (v1.5.5). I have seen that this older version of Angular may cause issues during the submission of the app to FireFox (https://github.com/mozilla/addons-linter/issues/1000#issuecomment-255183470), but I've seen no indication that this would be a factor w/ testing and the current error. (And I'm trying to solve this before I introduce any further errors w/ an Angular upgrade).
Any tips out there?
The issue here is that Angular sanitizes ng-src URLs for images and links.
Prepending unsafe: renders the link unusable, and signals that Angular does not recognize it as valid.
This is a known behavior in extensions:
Angular changes urls to "unsafe:" in extension page
ng-src doesn't work in Chrome app, even with ng-csp
As shown in the links above, this behavior can be overridden by patching $compileProvider's imgSrcSanitizationWhitelist and aHrefSanitizationWhitelist. Angular developers officially blessed this workaround and decided not to modify core Angular code for non-web use.
Since the extension you're porting is working in Chrome, it should already contain this patching. All you need to do is to add moz-extension: to the whitelist. Using the bugtracker's example, modified to work in both Chrome and Firefox:
var myModule = angular.module('myApp', [...], function($compileProvider) {
...
$compileProvider.imgSrcSanitizationWhitelist(
/^\s*(https?|ftp|file|chrome-extension|moz-extension):|data:image\//
);
$compileProvider.aHrefSanitizationWhitelist(
/^\s*(https?|ftp|mailto|file|chrome-extension|moz-extension):/
);
});
It should be similarly modified for other non-web platforms, i.e. for Edge or node-webkit.

ng-include not including template

I'm following a Code School tutorial on Angular. I'm trying to include a template with ng-include. I have the following code:
<h3 ng-include="'product-title.html'"></h3>
and my product-title.html
{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
When I inspect the element it shows <!-- ngInclude: 'product-title.html' -->
Question. Do I need to be running a web server in order for this to work?
Yes, you need to run your application from a server. Templates are loaded via AJAX call, and those calls need to originate from a webserver.
You have several lightweight options to run an ad-hoc static files servers, e.g.:
node's simple-server (https://github.com/balupton/simple-server)
python's python -m SimpleHTTPServer

Silverlight HyperlinkButton NOT Working at ALL

I'm trying to implement the Siverlight HyperlinkButton according to this documentation:
<HyperlinkButton Content="Click here to learn about Silverlight"
NavigateUri="http://www.silverlight.net"
TargetName="_blank"
Margin="10,60,0,0"/>
But, when I build and click it, it shows nothing.
My guess would be that you have not enabled external navigation for the Silverlight object. If you haven't a security exception will be getting thrown when you click the link, but you may be catching it without knowing. This is described in the remarks section of your above link.
To enable navigation edit your Silveright host page (E.G. index.html) and add the following param under the Silverlight object
<param name="enableNavigation" value="true" />
By default Silverlight generates the .html page each time you run/debug so you will lose the param. To get around this make a copy of the .html file in the same directory but with a different name or manually specify which .html file to use in the project settings.
http://msdn.microsoft.com/en-us/library/dd833071(v=vs.95).aspx
Update:
This works for Chrome, Firefox and IE8. It does not work for IE9. You can test this in IE by using the developer tools. Links work with Document Mode IE8 but throw an Unauthorized Access exception when using Document Mode IE9.
Update #2:
To get it to work in IE9 you can force it to use the IE8 Document Mode. To do this you need to remove the DOCTYPE tag and add a meta tag. E.G.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="x-ua-compatible" content="IE=8">
.
.
Instead of
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
.
.
You Should Visit This Link For Hyperlink Button Issue or ..... it's defiantly working.....
<UserControl x:Class="HyperlinkButton2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="100">
<Canvas x:Name="LayoutRoot" Background="White">
<HyperlinkButton x:Name="hbtnTest" TargetName="_blank" Content="SilverlightShow" NavigateUri="http://www.silverlightshow.net" Canvas.Top="40" Canvas.Left="30"></HyperlinkButton>
</Canvas>
Using the HyperlinkButton control in Silverlight

Resources