In my xamarin.forms app I am using a webview. I have a video control is playing video on the top.
I am using webview which also html5 based video. When someone playing the video I want to stop video that is playing on control.
How to do that in xamarin.forms.
in your html5 file
set the id of the video
<video id="video">...</video>
And add listener in JS
var video=document.getElementById("video");
video.addEventListener("play",function(){
});
Solution 1
If you want to stop play it ,why don't you stop it in Html 5?
var video=document.getElementById("video");
video.addEventListener("play",function(){
video.stop();
});
Solution 2
If you do want to stop it in Forms , it will be a little complex.
You should implement it in Custom Renderer
var video=document.getElementById("video");
video.addEventListener("play",function(){
invokeNativeMethod();
});
The invokeNativeMethod JavaScript function is not defined in the web page, and will be injected into it by each custom renderer.
You can refer HybridWebView for more details about how to call c# method in JS.
I have written a project using youtube player with IFrame API.
Until now it was working well but today it stopped firing onStateChange events.
I googled for that and saw that its reported alot in the last day.
One solution that is suggested is to add to playerVars option the item - html:1 so youtube player will be an html5 and not Flash.
But even when i add it, its not working.
Besides in youtube player parameters there is no parameter - html:1.
https://developers.google.com/youtube/player_parameters
Since its not supposed to happen on Html5 player as it is said here:
YouTube iFrame API 'onStateChange' not firing in Firefox
Then how i make youtube player be an html5 on my project which is what i prefer anyway ?
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
playerVars: {rel:0, html5: 1 },
events: {
'onReady': onPlayerReady,
'onStateChange':onPlayerStateChange
}
});
}
As it seems pyqt4 doesnt support html5 video.
I tried to load this site htmlTest with pyqt4 built in browser.
QWebView().setUrl(QUrl('http://html5test.com/'))
The results were that the browser running with pyqt4 is not supporting html5 video.
Probably i need a higher version of pyqt.
As for onStateChange events not firing ... it was probably a temporary bug with flash player or something like that and it was fixed alone.
When using HTML5 video, is it possible to have a constantly running script while the video is playing (but only when its playing)?
For example:
video.onplaying = function(e){
alert("playing");
}
video.bind("ended", function(){
alert('Video Ended');
});
These are examples I found and tried to incorporate into my player with little success.
When video starts call setInterval() to start your background task and give it the repeat frequency.
Do tasks in this function.
When video stops call clearInterval().
https://developer.mozilla.org/en/window.setInterval
I want to play a mp3 using HTML 5 audio support.
I was trying to use an audio tag but now I am doing it using javascript.
My "Player" will be just a tiny Play image, that when is pressed plays the audio (not all the audio control with progress).
I am trying to play it using javascript .
function playmp3(url){
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', url);
audioElement.load();
audioElement.play();
}
This is my code and it does not work. It executes ok when I click an image that is my Play button.
Url is a string that contains the url of a file.
I am testing in the newest versions of Chrome and FF.
Trying listening for the canplay event before attempting to play the mp3. Here's an example of how to do that:
function playmp3(url){
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', url);
audioElement.load();
audioElement.addEventListener("canplay", function() {
audioElement.play();
});
}
The canplay event is fired when the browser can start playing the mp3, but it doesn't guarantee that it can play the mp3 to completion. If that doesn't suite your purposes, there are a couple of other related events that you can listen to such as loadeddata and canplaythrough.
I'm trying to put a YouTube video source into the HTML5 <video> tag, but it doesn't seem to work. After some Googling, I found out that HTML5 doesn't support YouTube video URLs as a source.
Can you use HTML5 to embed YouTube videos? If not, is there any workaround?
This answer does not work anymore, but I'm looking for a solution.
As of . 2015 / 02 / 24 . there is a website (youtubeinmp4) that allows you to download youtube videos in .mp4 format, you can exploit this (with some JavaScript) to get away with embedding youtube videos in <video> tags. Here is a demo of this in action.
##Pros
Fairly easy to implement.
Quite fast server response actually (it doesn't take that much to retrieve the videos).
Abstraction (the accepted solution, even if it worked properly, would only be applicable if you knew beforehand which videos you were going to play, this works for any user inputted url).
##Cons
It obviously depends on the youtubeinmp4.com servers and their way of providing a downloading link (which can be passed as a <video> source), so this answer may not be valid in the future.
You can't choose the video quality.
###JavaScript (after load)
videos = document.querySelectorAll("video");
for (var i = 0, l = videos.length; i < l; i++) {
var video = videos[i];
var src = video.src || (function () {
var sources = video.querySelectorAll("source");
for (var j = 0, sl = sources.length; j < sl; j++) {
var source = sources[j];
var type = source.type;
var isMp4 = type.indexOf("mp4") != -1;
if (isMp4) return source.src;
}
return null;
})();
if (src) {
var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i);
if (isYoutube) {
var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi);
id = (id.length > 1) ? id.splice(1) : id;
id = id.toString();
var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";
video.src = mp4url + id;
}
}
}
###Usage (Full)
<video controls="true">
<source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
</video>
Standard video format.
###Usage (Mini)
<video src="youtu.be/MLeIBFYY6UY" controls="true"></video>
A little less common but quite smaller, using the shortened url youtu.be as the src attribute directly in the <video> tag.
I have created a realtively small (4.89 KB) javascript library for this exact functionality.
Found on my GitHub here: https://github.com/thelevicole/youtube-to-html5-loader/
It's as simple as:
<video data-yt2html5="https://www.youtube.com/watch?v=ScMzIvxBSi4"></video>
<script src="https://cdn.jsdelivr.net/gh/thelevicole/youtube-to-html5-loader#2.0.0/dist/YouTubeToHtml5.js"></script>
<script>new YouTubeToHtml5();</script>
Working example here: https://jsfiddle.net/thelevicole/5g6dbpx3/1/
What the library does is extract the video ID from the data attribute and makes a request to the https://www.youtube.com/get_video_info?video_id=. It decodes the response which includes streaming information we can use to add a source to the <video> tag.
UPDATE June 2021
YouTube have recently updated their API which has broken previous versions of this package. Please now use versions 4.0.1 and up! Updated example:
<video data-yt2html5="https://www.youtube.com/watch?v=ScMzIvxBSi4"></video>
<script src="https://cdn.jsdelivr.net/gh/thelevicole/youtube-to-html5-loader#4.0.1/dist/YouTubeToHtml5.js"></script>
<script>new YouTubeToHtml5();</script>
https://jsfiddle.net/thelevicole/5g6dbpx3/2/
The <video> tag is meant to load in a video of a supported format (which may differ by browser).
YouTube embed links are not just videos, they are typically webpages that contain logic to detect what your user supports and how they can play the youtube video, using HTML5, or flash, or some other plugin based on what is available on the users PC. This is why you are having a difficult time using the video tag with youtube videos.
YouTube does offer a developer API to embed a youtube video into your page.
I made a JSFiddle as a live example: http://jsfiddle.net/zub16fgt/
And you can read more about the YouTube API here: https://developers.google.com/youtube/iframe_api_reference#Getting_Started
The Code can also be found below
In your HTML:
<div id="player"></div>
In your Javascript:
var onPlayerReady = function(event) {
event.target.playVideo();
};
// The first argument of YT.Player is an HTML element ID.
// YouTube API will replace my <div id="player"> tag
// with an iframe containing the youtube video.
var player = new YT.Player('player', {
height: 320,
width: 400,
videoId : '6Dc1C77nra4',
events : {
'onReady' : onPlayerReady
}
});
Step 1: add &html5=True to your favorite youtube url
Step 2: Find <video/> tag in source
Step 3: Add controls="controls" to video tag: <video controls="controls"..../>
Example:
<video controls="controls" class="video-stream" x-webkit-airplay="allow" data-youtube-id="N9oxmRT2YWw" src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&itag=43&ipbits=0&signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&sver=3&ratebypass=yes&expire=1300417200&key=yt1&ip=0.0.0.0&id=37da319914f6616c"></video>
Note there seems to some expire stuff. I don't know how long the src string will work.
Still testing myself.
Edit (July 28, 2011): Note that this video src is specific to the browser you use to retrieve the page source. I think Youtube generates this HTML dynamically (at least currently) so in testing if I copy in Firefox this works in Firefox, but not Chrome, for example.
how about doing it the way hooktube does it? they don't actually use the video URL for the html5 element, but the google video redirector url that calls upon that video. check out here's how they present some despacito random video...
<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>
the code is for the following video page https://hooktube.com/watch?v=72UO0v5ESUo
youtube to mp3 on the other hand has turned into extremely monetized monster that returns now download.html on half of video download requests... annoying...
the 2 links in this answer are to my personal experiences with both resources. how hooktube is nice and fresh and actually helps avoid censorship and geo restrictions.. check it out, it's pretty cool. and youtubeinmp4 is a popup monster now known as ConvertInMp4...
In case anyone stumbles upon this question, a neat way to embed YouTube video is to use embed tag, like so:
<embed src="https://www.youtube-nocookie.com/embed/DelkRGZCtTs" width="100%" height="333">
The easiest answer is given by W3schools.
https://www.w3schools.com/html/html_youtube.asp
Upload your video to Youtube
Note the Video ID
Now write this code in your HTML5.
<iframe width="640" height="520"
src="https://www.youtube.com/embed/<VideoID>">
</iframe>
With the new iframe tag embedded in your website, the code will automatically detect whether you are using a browser that supports HTML5 or not.
The iframe code for embedding YouTube videos is as follows, simply copy the Video ID and replace in the code below:
<iframe type="text/html"
width="640"
height="385"
src="http://www.youtube.com/embed/VIDEO_ID"
frameborder="0">
</iframe>