My embded youtube video won't play on mobile devices (desktop working fine). the videos is trigger when an image which hover it got clicked.i would like to keep it that way just to make it work on mobile.
(i know that it has something to do with the fact that i must emded it)
can you please advice
Thanks a lot!!
this is the code:
a class="thumb-video show-product-video" href="https://www.youtube.com/watch?v=fmpEyJJHBC8">
in the html, add the unique code of youtube in the last section of url
ex: http://www.youtube.com/v/fmpEyJJHBC8
try this
public string GetVideo(object MedVideo)
{
//DataRowView dRView = (DataRowView)imgSRC;
string v = MedVideo.ToString();
v = v.Substring(v.LastIndexOf("v=") + 2);
if (v.Contains("&"))
v = v.Substring(0, v.LastIndexOf("&"));
VideoURL = "http://www.youtube.com/v/" + v;
return VideoURL;
}
Related
From https://stackoverflow.com/a/21227589/130910:
var stream = videoTag.captureStream()
But I don't want to have to create the tag.
I want to do this because my stream may be from a webcam or a video, and when it's a webcam, I am setting the videoTag.srcObject to the result of navigator.mediaDevices.getUserMedia(...). So it makes the API clunky.
I want to do:
const stream = getStreamFromLocalVideoOrWebcam()
videoTag.src = stream
Is this possible? What is the best approach?
I want to do this because my stream may be from a webcam or a video
I'll take that to mean you have a MediaStream (from getUserMedia/webcam), or a URL (pointing at a video).
If you actually have a MediaStream, you should be setting the srcObject, as you are now. If you have a URL, you should be using the src property instead. So, the design of the return value of your function getStreamFromLocalVideoOrWebcam() is flawed.
You could always do something like this instead:
function setVideoSource(videoEl) {
if (... something ...) {
videoEl.src = someVideoUrl;
} else {
videoEl.srcObject = navigator.mediaDevices.getUserMedia(...);
}
}
const videoEl = document.createElement('video');
setVideoSource(videoEl);
I am trying to use Cordova Media Capture to play video however, it does not work.
Here is my JS:
function video() {
navigator.device.capture.captureVideo(onSuccess, onFail,
{
limit: 1,
duration: constants.MAX_DURATION_OF_VIDEO
});
function onSuccess(mediaFiles) {
console.log("MEDIA FILE");
console.log(mediaFiles);
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
path = mediaFiles[i].localURL;
console.log(path);
$state.go('submitMoment', {picture: $sce.trustAsResourceUrl(path)});
}
};
function onFail(message) {
console.log("FAILED because: " + message);
}
};
I have tried both FullPath and localURL. I'm using localURL here because this video is being taken from the user's phone and I get an error from the browser. It is sandboxed so I cannot use a localURL coming from an external device. The device returns a video in mp4 format.
Here is how it looks when I display it on the next screen in '$state.go'
The controls appear fine but when you play the video nothing happens. It's just a white screen.
Once the video is done playing it just disappears:
Here is my HTML:
<video width="100%" height="300px" controls>
<source src="{{vm.picture}}" type="video/mp4"></source>
</video>
This is some strange behavior. Does anyone know whats going on?
Thanks.
EDIT:
Console display:
This is the error I get when I use 'fullPath' because of this I decided to use the localURL instead and I don't get the error. Also, it seems like the white screen bug isn't really a bug. If i tap it the controls show up but it is still stuck on play (The first screenshot).
In the onSucess method, store media url as
$scope.videoSrc = mediaFiles[0].fullPath;
$state.go('submitMoment', {picture: $scope.videoSrc);
Receive picture as $stateParams in your new Page.
$scope.videoUrl = $stateParams.picture;
In your HTML
<source src="{{videoUrl}}" type='video/mp4' />
In your controller inject the $stateParams dependency.
Hope this helps you.
I have trying to load youtube videos using stagewebview on AIR Desktop. (windows 10)
Code below:
var SWV:StageWebView = new StageWebView(true);
SWV.addEventListener(ErrorEvent.ERROR, swvErrorHandler);
var swvHeight:Number = stage.stageHeight - (75);
var swvWidth:Number = stage.stageWidth;
var swvYCoord:Number = 75;
SWV.stage = stage;
SWV.viewPort = new Rectangle(0, swvYCoord, swvWidth, swvHeight);
var vId:String = 'QowwaefoCec';
var urlToLoad:String = "http://www.youtube.com/embed/"+vId+"?rel=0&controls=1&showinfo=0&autoplay=0";
SWV.loadURL(urlToLoad);
Running the code gives a window with black background. Right clicking on it pops up the adobe flashplayer menu stating "Movie not loaded". Flash version is 25.0.0.148
If i use
urlToLoad="https://www.youtube.com/watch?v="+vId;
i get a malformed youtube page with majority of elements missing.
Tried with number of videos. result is always the same.
Can any one help please? I remember having tried out the above code a year or so back (when i was testing something else). It had definitely worked then. Cant fathom why it doesnot work now. Any help will be highly appreciated.
Please try the following:
var urlToLoad:String = "<!DOCTYPE HTML><html><body><iframe style=\"border: 0; width: 100%; height: 100%; padding:0px; margin:0px\" id=\"player\" type=\"text/html\" src=\"http://www.youtube.com/embed/" + vId + "?fs=0\" frameborder=\"0\"></iframe></body></html>";
SWV.loadString(urlToLoad, "text/html" );
Same problem. if you only want to play, try this:
browser.loadURL("https://www.youtube.com/v/hFupHx5G44s");
I made a tsp which decode Image to base64 byte array String.
It works in Chrome and Firefox. However in safari 8.0, it does not work.
My jsp looks like below :
String sFileInfo = "";
String name = request.getHeader("file-name");
String ext = name.substring(name.lastIndexOf(".")+1);
InputStream is = request.getInputStream();
byte b[] = IOUtils.toByteArray(is);
String base64DataString = Base64.encodeBase64String(b);
base64DataString = "data:image/" + ext + ";base64," + base64DataString;
if(is != null) {
is.close();
}
And as result code below will be attached to browser.
<p><span style="font-size:48px"><img alt="" src="data:image/jpeg;base64,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" style="height:90px; width:169px" />1<span style="background-color:#00FFFF">zxczxczc</span></span></p>
I copy this code(part of after base64;) and put link below in safari.
http://base64online.org/decode/
and I got an image, so I assume that Safari also support base64 image.
However, when I put this on web with image tags, it does not work.
Thanks for answer :D
PS browser error message is
Failed to load resource: (kCFErrorDomainCFNetwork error -10.)
I know this question is pretty old but I've recently faced a similar problem on iOS' safari, and the problem seems to be that Safari will not render base64 images that does not have a number of character divisible by 4.
The solution to this problem is to pad your encoded string at the end using '=' characters. Here is a basic algorithm:
// b64str = 's/3eea4sp...' (or any base 64 encoded string)
while (b64str.length % 4 > 0) {
b64str += '=';
}
Hope this helps someone !
I was in a similar situation but the posted solution did not work for me. But I did come up with an alternative solution after some trial and error. Hope this helps out.
// Add an actual base64 string
var encodedImgString = 'data:image/png;base64,iVBORw0KGgoAAA...';
// Create an image, set img source and cross origin attribute
var iosImg = new Image;
iosImg.src = encodedImgString;
iosImg.crossOrigin = 'Anonymous';
// Change this to target your element and add it wherever you need it to appear
document.body.appendChild(iosImg);
#SylvainB - I think it needs to be divisible by 3 or 4 to render in Safari
#IHan - make sure to exlude 'data:image/png;base64,' part while doing the divisibility test
Not a fix but I think a more deeper look into this is that safari won't render the base64 at all with the dom loading but will work if you apply it using JS. You can go to inspect and remove your base64 and repost it in the image will load fine.
I want to autoplay an HTML5 video only after it loads. I would also like to have a progress bar (GIF or CSS) while it loads. Any help?
Not sure whether or not you want it to play only after the page loads, or after the video itself has finished buffering.
If you want it to play automatically upon the page loading you would want to use the tag's "autoplay" attribute.
Example
<video controls autoplay> </video>
For easy to understand information on how to make some rather cool looking loading bars in CCS3, see here. CSS-tricks always has some interesting stuff.
UPDATE 2 Hey so this answer is a specific work around for this scenario (only a 12sec. video for a slow connection wanting to be played back smoothly) nonetheless this should fill your needs:
$(document).ready(function() {
_V_("example_video_1").ready(function(){
var myPlayer = this;
myPlayer.on("progress", out_started);
});
});
function out_started(){
myPlayer =this;
var myTextArea = document.getElementById('buffered');
bufferedTimeRange=myPlayer.buffered();
if ( (bufferedTimeRange.start(0)==0 ) && ( bufferedTimeRange.end(0) - bufferedTimeRange.start(0) > 10 ) ){
myPlayer.play();
}
}
So some things, bufferedTimeRange can be more then one single rnge of time (but with only 12 sec. of video odds are only one as docs say only 1 ussualy ) .. but not guaranteed . None the less here's a link demoing it http://ec2-23-20-36-210.compute-1.amazonaws.com/video-js.html Hopeully this helps! also if 10 second of buffered video is not enough you can change the 10 to a 12 in the if statement
Original Answer
I am not sure why you would want to do this ... but video.js does make it possible
if you have a video element called example_video_1 you can write a javscript that look's like this (not this is if you choose to use video.js which again I recomend set up is easy see http://www.videojs.com/ for an example and get started to actually set it up)
VideoJS("example_video_1").ready(function(){
var myPlayer = this;
var howMuchIsDownloaded = myPlayer.bufferedPercent();
if(howMuchIsDownloaded == 1){
myPlayer.play(); //start playing the video
}else{
setTimeout(arguments.callee, 100);
}
});
Update it appears the API call layed out above is presently broken for Video.js (bug has been reported) Here is an example to tell when a video has finished being buffered if your video tag id is "example_video_1"
$(document).ready(function() {
_V_("example_video_1").ready(function(){
var myPlayer = this;
myPlayer.on("loadedalldata", Done_download);
});
});
function Done_download(){
myPlayer =this;
var myTextArea = document.getElementById('buffered');
alert("The video has been fully buffered ");
myPlayer.off("loadedalldata", Done_download);
}
Note there seem's to be an internal mechanism in Video.js that will not allow an entire video stream to be buffered before playback has reached with a certain range of the video (at least with an .mp4 source)
#DONSA you can check out this strange behavior here video-js sample page ... ill keep it up for a couple day's on my test server
I have a cleaner example, also using video.js:
function progress(){
video = this;
if (video.bufferedPercent() > .95 && video.paused()) {
video.play();
}
}
$(document).ready(function() {
_V_("video").ready(function(){
this.on("progress", progress);
});
});
and
<video src="mcd.mp4" id="video">