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();
});
});
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 using videoJs for showing the video.
HTML
<video id="player-vjs_html5_api" class="vjs-tech" crossorigin="anonymous" preload="auto" src="http://path-to-video/small.mp4">
<p class="vjs-no-vjs">Your browser does not support video.</p>
</video>
Javascript
loadMedia: function(path) {
player.src(path);
return void 0;
}
It works perfectly when i used .webm but i tried with mp4 i got following error
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.
I tried following too but it doesn't work
<video id="player-vjs_html5_api" class="vjs-tech" crossorigin="anonymous" preload="auto">
<source src="" type="video/mp4" />
<source src="" type="video/webm" />
<source src="" type="video/ogv" />
<p class="vjs-no-vjs">Your browser does not support video.</p>
</video>
and
loadMedia: function(path) {
player.src([
{ type: "video/mp4", src: path+".mp4" },
{ type: "video/webm", src: path+".webm" },
{ type: "video/ogg", src: path+".ogv" }
]);
return void 0;
}
but it didn't work too.
It works when i did following changes. just removed crossorigin="anonymous"
<video id="player-vjs_html5_api" class="vjs-tech" preload="auto">
<source src="" type="video/mp4" />
<source src="" type="video/webm" />
<source src="" type="video/ogv" />
<p class="vjs-no-vjs">Your browser does not support video.</p>
</video>
javascript
loadMedia: function(path) {
player.src([
{ type: "video/mp4", src: path+".mp4" },
{ type: "video/webm", src: path+".webm" },
{ type: "video/ogg", src: path+".ogv" }
]);
return void 0;
}
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;
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>
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?';
};