Develop Reference

Integrating video.js in angular web app

I am facing a strange error while trying to integrate video.js in my angular app.
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none"
width="300" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
<source src="http://d2bqeap5aduv6p.cloudfront.net/project_coderush_640x360_521kbs_56min.mp4" type='video/mp4' />
</video>
Above code is working fine for me. But when I declare the url of video in controller, it is giving me following error
Here is the code of views
<video id="example_video_2" class="video-js vjs-default-skin" controls preload="none"
width="300" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
<source src="{{video_link}}" type='video/mp4' />
</video>
And here is my controller
app.controller('IndexCtrl', function ( $scope, $location, $http,$sce,$routeParams) {
angular.element(document).ready(function () {
//$scope.getVideos();
$scope.video_link = "http://d2bqeap5aduv6p.cloudfront.net/project_coderush_640x360_521kbs_56min.mp4";
});
})
Can any one explain why I am getting this error?

Src is not working with angular syntax use ng-src instead of.
<source ng-src="{{video_link}}" type='video/mp4' />
Here what I did in my application controller:
$scope.generateSrc = function (file, mediaType) {
if (!!file) {
return '/media/conversation/' + mediaType + '/' + file;
}
};
In template
<video poster="{{generateSrc(mediaPoster, 'photo')}}" width="100%" height="100%" class="hzVideoPlayer" id="v_{{vId}}" preload="auto" loop>
<!--MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7-->
<source ng-src="{{generateSrc(mediaUrl, 'video')}}" type="video/mp4" data-quality="high">
<source ng-src="{{generateSrc('SD_'+mediaUrl, 'video')}}" type="video/mp4" data-quality="low">
<!-- WebM/VP8 for Firefox4, Opera, and Chrome-->
<source ng-src="{{generateSrc(mediaUrl, 'video')}}" type="video/webm" data-quality="high">
<source ng-src="{{generateSrc('SD_'+mediaUrl, 'video')}}" type="video/webm" data-quality="low">
<!-- Flash fallback for non-HTML5 browsers without JavaScript-->
<object width="320" height="240" type="application/x-shockwave-flash" data="/media/flashmediaelement.swf">
<param name="movie" value="/media/flashmediaelement.swf"/>
<param name="flashvars" value="controls=true&file={{generateSrc(mediaUrl, 'video')}}"/>
<!-- Image as a last resort -->
<img ng-src="{{generateSrc(mediaPoster, 'photo')}}" width="320" height="240" title="No video playback capabilities"/>
</object>
</video>

Random Array Item and Set as Embed SRC

I'm attempting to creating a music player that plays a random song by choose a random item from an array and setting it and other things, via concatenation, as the embed's src.
<script type="text/javascript">
//Playlist
var musicArray = ['b.mp3', 'b2.mp3', 'b3.mp3'];
//src vars
var first = 'niftyplayer.swf?file=';
var last = '&as=1';
// Shuffle
var mid = musicArray[Math.floor(Math.random() * myArray.length)];
//Set src
getElementById("embed").src='first+mid+last';
getElementById("param").value='first+mid+last';
</script>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0, 0" width="165" height="38" id="niftyPlayer1" align="">
<param id="param" name=movie value="">
<param name=quality value=high>
<param name=bgcolor value=#FFFFFF>
<embed id="embed" src="" quality=high bgcolor=#FFFFFF width="165" height="38" name="niftyPlayer1" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
<script type="text/javascript" language="javascript" src="niftyplayer.js"></script>
However, my script does not work.
JSFiddle of niftyplayer.js

In this case, load js after html.
Then, fix your 'embed' and 'param'.
-- code below.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0, 0" width="165" height="38" id="niftyPlayer1" align="">
<param id="param" name=movie value="">
<param name=quality value=high>
<param name=bgcolor value=#FFFFFF>
<embed id="embed" src="" quality=high bgcolor=#FFFFFF width="165" height="38" name="niftyPlayer1" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
<script type="text/javascript" language="javascript" src="niftyplayer.js"></script>
<script type="text/javascript">
//Playlist
var musicArray = ['b.mp3', 'b2.mp3', 'b3.mp3'];
//src vars
var first = 'niftyplayer.swf?file=';
var last = '&as=1';
// Shuffle
var mid = musicArray[Math.floor(Math.random() * myArray.length)];
//Set src
getElementById("embed").src = first + mid + last;
getElementById("param").value = first + mid + last;
</script>

Put the javascript code after html, and remove quotes from below lines 'first+mid+last'
getElementById("embed").src= first+mid+last;
getElementById("param").value= first+mid+last;

add or remove controls attribute from html5 <video> tag

I am looking for a method to add the controls attribute to a video tag based upon the user agent string.
I do not wish to have the controls attribute present on any browser or device other than Ipad and Android. So i thought that user agent was the best way to identify because the words ipad and android are present in their respective UA header.
What is the best way to accomplish my goal?
I've tried this with no luck:
<script type="text/javascript">
var myVideo = document.getElementById("myVideo");
var agent = navigator.userAgent.toLowerCase();
var addAttr = (agent.indexOf('ipad')!=-1) || agent.indexOf('android')!=-1);
if (addAttr) {
myVideo.setAttribute("controls","controls");
}
else {
document.write("");
}
</script>
and here is my html5 video stuff
<video id="myVideo" width="1170" height="324" preload="metadata" autoplay="true">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0"
width="1170" height="324" >
<param name="movie" value="movie.swf">
<param name="quality" value="high">
<param name="play" value="true">
<param name="LOOP" value="false">
<embed src="movie.swf" width="1170" height="324" play="true" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
</embed>
</object>
</video>
Any help would be appreciated!

And without jQuery, surprisingly even shorter:
//Add
myVideo.controls = "controls";
//Remove
myVideo.controls = "";
Based on that you already created a variable myVideo as you did:
var myVideo = document.getElementById("myVideo");
Hope that helped :)

You can do it with jQuery:
//Add
$('#myVideo').prop("controls", true);
//Remove
$('#myVideo').prop("controls", false);

You can also add controls attribute like this:
myVideo.controls = true;

Jquery Mobile single page app + video + dynamic changing video

Has anybody found a robust way to change the source of a video element dynamically and make it work on Iphone? My testing works fine in Chrome, but I can not make it work consistently. Any suggestions on strategy or player is welcome, so it will work on any device.
I have a video element:
<video id="player1" width="320" height="240" preload controls>
<source src="http://dev.swinginsam.com/_files/testvid_01.mp4" />
<source src="http://dev.swinginsam.com/_files/testvid_01.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://dev.swinginsam.com/_files/testvid_01.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://dev.swinginsam.com/_files/testvid_01.mp4", "autoPlay":false, "autoBuffering":true}}' />
<p>Download video as
MP4,
WebM, or Ogg.</p>
</object>
</video>
And a snippet of code for initalizing the player I use mediaelementjs - it works in the sence that the player is correcly initialized and skinned and works for the first video:
$('#one').live("pageinit", function (event, data) {
var player1 = new MediaElementPlayer('#player1',{});
$('#button1').click(function(){
player1.pause();
player1.setSrc([
{src:"http://dev.swinginsam.com/_files/testvid_01.mp4"},
{src:"http://dev.swinginsam.com/_files/testvid_01.webm", type:'video/webm; codecs="vp8, vorbis"'},
{src:"http://dev.swinginsam.com/_files/testvid_01.ogv", type:'video/ogg; codecs="theora, vorbis"'}
]);
$('#button2').click(function(){
player1.pause();
player1.setSrc([
{src:"http://dev.swinginsam.com/_files/testvid_02.mp4"},
{src:"http://dev.swinginsam.com/_files/testvid_02.webm", type:'video/webm; codecs="vp8, vorbis"'},
{src:"http://dev.swinginsam.com/_files/testvid_02.ogv", type:'video/ogg; codecs="theora, vorbis"'}
]);
player1.load();
});
});
Problems begin when you press the buttons and begin to change the source. It works in Chrome but Safari just continues to play the first video.

You are missing the closing parenthesis }); for your $('#button1').click(function(){. The javascript should be :
$('#one').live("pageinit", function(event, data) {
var player1 = new MediaElementPlayer('#player1', {});
$('#button1').click(function() {
player1.pause();
player1.setSrc([
{
src: "http://dev.swinginsam.com/_files/testvid_01.mp4"},
{
src: "http://dev.swinginsam.com/_files/testvid_01.webm",
type: 'video/webm; codecs="vp8, vorbis"'},
{
src: "http://dev.swinginsam.com/_files/testvid_01.ogv",
type: 'video/ogg; codecs="theora, vorbis"'}
]);
});
$('#button2').click(function() {
player1.pause();
player1.setSrc([
{
src: "http://dev.swinginsam.com/_files/testvid_02.mp4"},
{
src: "http://dev.swinginsam.com/_files/testvid_02.webm",
type: 'video/webm; codecs="vp8, vorbis"'},
{
src: "http://dev.swinginsam.com/_files/testvid_02.ogv",
type: 'video/ogg; codecs="theora, vorbis"'}
]);
player1.load();
});
});​

Click to play vimeo

Trying to implement this feature click to play the vimeo video.
I found an example of this and figured it's possible some way. I saw it on this square up page: https://squareup.com/#video-testimonials
Anyone have any idea how they did this? They replaced the image with the video and had it play?

I just wrote some query to make this work. Given markup that looks like this:
<img id="vimeo-83741013" class="vimeo" alt=""/>
This jQuery will grab the thumbnail and make it click to play:
//Finds Thumbnails for Vimeo Videos
$('html').find('img.vimeo').each(function(index,item){
var vimeo_id = this.id.split('-')[1];
$.ajax({
type:'GET',
url: 'http://vimeo.com/api/v2/video/' + vimeo_id + '.json',
jsonp: 'callback',
dataType: 'jsonp',
success: function(data){
var thumb_src = data[0].thumbnail_large;
$(item).attr('src', thumb_src);
}
});
});
//Replace Vimeo Thumbnail with Vimeo Video
$('html').on('click', 'img.vimeo', function(){
var vimeo_id = this.id.split('-')[1];
var vimeoHeight, vimeoWidth;
vimeoHeight = $(this).outerHeight();
vimeoWidth = $(this).outerWidth();
var $iframe = $('<iframe />', {
src : '//player.vimeo.com/video/'+vimeo_id+'/?autoplay=1',
class : 'vimeo',
frameborder : 0
})
$iframe.attr('width',vimeoWidth).attr('height', vimeoHeight);
$(this).parent().removeClass('video');
$(this).replaceWith($iframe);
});
You can see an example in action here:
http://codepen.io/roundedbygravity/pen/pGAhC

That site uses VideoJS with the vimcss skin.
The video is in fact not hosted on Vimeo, but on Amazon S3, as you can see in the source:
<video id="cafe-video" class="video-js" width="470" height="264" controls="controls" preload="none" poster="https://s3.amazonaws.com/square-production/video/caffelastazione.jpg">
<source src="https://s3.amazonaws.com/square-production/video/caffelastazione.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="https://s3.amazonaws.com/square-production/video/caffelastazione.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="https://s3.amazonaws.com/square-production/video/caffelastazione.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object class="vjs-flash-fallback" width="470" height="264" type="application/x-shockwave-flash"
data="https://d1g145x70srn7h.cloudfront.net/static/0bce7753923e25b5c0d564d064d4c02de79088c1/images/flowplayer.swf">
<param name="movie" value="https://d1g145x70srn7h.cloudfront.net/static/0bce7753923e25b5c0d564d064d4c02de79088c1/images/flowplayer.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["https://s3.amazonaws.com/square-production/video/caffelastazione.jpg", {"url": "https://s3.amazonaws.com/square-production/video/caffelastazione.m4v","autoPlay":false,"autoBuffering":true}]}' />
<img src="https://s3.amazonaws.com/square-production/video/caffelastazione.jpg" width="470" height="264" alt="Testimonial" title="No video playback capabilities." />
</object>
</video>