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>
Related
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>
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;
I have set up some HTML audio on my site and I have set an autoplay function after a couple of seconds, however the sound seems to be loading twice? one starts playing straight after the other although, one is a ghost and cannot see a player for it.
How could I go about telling javascript not to start playing sounds if there are already sounds playing?
<audio controls="controls" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 2000)" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>
The above issue has been solved however I wanted to add a flash fallback for this audio for internet explorer and so added:
<div id ="audio">
<script>var readingMusic = false; </script>
<audio controls="controls" loop="loop" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://www.alanis50.com/Music/music.mp3&autoPlay=true" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best" wmode="transparent"></embed>
</audio>
</div>
<div id="audiohide">
<audio controls="controls" loop="loop" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://www.alanis50.com/Music/music.mp3&autoPlay=true" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best" wmode="transparent"></embed>
</audio>
</div>
But now the flash audio is behaving how the previous audio did obviously the javascript is not affecting the flash embed?
Can't you have a boolean telling the browser if there is already some music playing ?
Example with 2 tags:
<script>var readingMusic = false; </script>
<audio controls="controls" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>
<audio controls="controls" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>
Well, that's a part of your jScript.js.
It seems that problem is in this line:
location = base + "/#" + current.replace(base, "");
You navigating to the new url without leaving current page(if origins are the same and the only difference is in hashes). I recommend you to start playing audio after changing location origin.
So you might place your autoplay logick right after this location changes.
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();
});
});
In my onbeforeunload event, it asked the user whether they want to leave the page or stay on it. When they click "stay on page", I want it to then redirect them to another webpage in the same window. It sounds weird, but that's what I've been assigned to do. Basically, the main page plays a video - I think advertising to buy something, and when they close but then decide to stay on the page, we want the video to go away/stop playing and some different information to appear (a different "webpage"). Is there a way to do this, without just showing/hiding divs? Can I override the function? I'm currently trying to do it this way(as seen below) but now the dialog box is not showing up at all. It was working before Any ideas as to what I'm doing wrong, or how to accomplish this task?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Shocking Truth - Cabot Market Letter</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#vid").show();
$("#div2").hide();
});
var test = 1;
function manipulatetest()
{
test = 2;
}
window.onbeforeunload = onbeforeunload_Handler;
function onbeforeunload_Handler()
{ if (test == 1){
$("#vid").hide();
$("#div2").show();
var confirm = confirm("Would you like to stay on this page?");
if (confirm == true) {
window.location = "http://www.google.com";
}
}
}
</script>
</head>
<style type="text/css">
body {
background-color: #e0e6e5;
}
#vid {
margin: 20px auto;
width: 920px;
}
</style>
<body>
<div id="vid">
<video width="920" height="540" autoplay preload controls>
<source src="shockingtruth.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="shockingtruth.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="shockingtruth.ogv" type='video/ogg; codecs="theora, vorbis"'>
<object width="920" height="540" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.7.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://www.cabot.net/videos/shocking-truth/shockingtruth.mp4", "autoPlay":true, "autoBuffering":true}}' />
<p>Download video as MP4, WebM, or Ogg.</p>
</object>
</video>
</div>
<div id="div2">
<video width="920" height="540" autoplay preload controls>
<source src="shockingtruth.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="shockingtruth.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="shockingtruth.ogv" type='video/ogg; codecs="theora, vorbis"'>
<object width="920" height="540" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.7.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://www.cabot.net/videos/shocking-truth/shockingtruth.mp4", "autoPlay":true, "autoBuffering":true}}' />
<p>Download video as MP4, WebM, or Ogg.</p>
</object>
</video>
</div>
<p style="text-align: center;">Click Here To Order</p>
</body>
A dirty trick is a setTimeout, and see whether it still runs: http://jsfiddle.net/FJ4LR/1/.
window.onbeforeunload = function() {
setTimeout(function() {
alert('You clicked stay.');
}, 500);
return 'Really?';
};