Im trying to show embedded video within Android WebView, but currently i have nothing but a plain white screen.
This is a code provided from Nest for embedded video:
"<iframe type="text/html" frameborder="0" width="480" height="394" src="//video.nest.com/embedded/live/Es9Ol5DCCB?autoplay=1" allowfullscreen></iframe>
This is how I'm trying to use in im my app:
WebView webview = view.findViewById(R.id.camera_view);//new
WebView(view.findViewById(R.id.camera_view));
webview.getSettings().setPluginState(WebSettings.PluginState.ON);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setAllowFileAccess(true);
webview.setWebChromeClient(new WebChromeClient());
webview.setWebViewClient(new WebViewClient());
String html = "<iframe type=\"text/html\" frameborder=\"0\" width=\"480\" height=\"394\" src=\"//video.nest.com/embedded/live/Es9Ol5DCCB?autoplay=1\" allowfullscreen></iframe>";
webview.loadDataWithBaseURL("video.nest.com",html, "text/html", null, null);
Am i missing some permissions here?
I am able to render videos from Nest camera with the following code.
First of all please make sure public_share_url is enabled for your camera.
Instead of loading URL in iFrame I have used video url directly.
String iFrameUrl =
"https://video.nest.com/embedded/live/Es9Ol5DCCB?autoplay=0";
WebSettings webViewSettings = webView.getSettings();
webViewSettings.setJavaScriptEnabled(true);
webViewSettings.setLoadWithOverviewMode(true);
webViewSettings.setUseWideViewPort(true); webView.loadUrl(iFrameUrl);
Happy coding!
Related
I am trying to create a web app using recently launched flutter_web, but facing issues in playing a video inside my app. Can someone guide me how to play a video in flutter_web.
I tried to create a web plugin for flutter web, but as the official docs of flutter_web we can't create a plugin for web.
I tried to add a video and iframe tag in index.html but no luck.
I tried to use VideoElement provided by dart:html but not sure how to use it.
prefix1.VideoElement element = prefix1.VideoElement();
element.height = 200;
element.width = 200;
element.appendHtml("""<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
""");
element.querySelector('#video');
element.play();
You can now just use the official video_player_web plugin by adding it to your pubspec.yaml:
video_player: ^0.10.4+1
video_player_web: ^0.1.0
Then you can follow the video player cookbook or use the chewie plugin to get a nice UI.
I have managed to play the video automatically and play with the sound.
I need to be able to interact with the video, such as pause, stop or play.
I hope it helps you, greetings.
DART
import 'package:flutter_web_ui/ui.dart' as ui;
import 'dart:html';
main() async {
await ui.webOnlyInitializePlatform();
VideoElement videoElement;
videoElement = querySelector('#video');
videoElement.src = "https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4";
videoElement.muted = false;
await videoElement.play();
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script defer src="reproductor.dart.js" type="application/javascript"></script>
</head>
<body>
<video id="video" class="absolute right-0 bottom-0 min-w-full min-h-full w-auto" controls autoplay muted></video>
</body>
</html>
I was struggling with the same issue until I ran the html_platform_view example from the flutter web repo.
Try this:
void main() {
ui.platformViewRegistry.registerViewFactory(
'hello-world-html',
(int viewId) => IFrameElement()..src = 'https://www.youtube.com/embed/tgbNymZ7vqY'
);
runApp(Directionality(
textDirection: TextDirection.ltr,
child: HtmlView(viewType: 'hello-world-html'),
));
}
I'm making a page builder type thing. For normal view the iframe needs to resize accordingly, but for mobile / tablet views it needs to be a set size.
using iframe-resizer https://github.com/davidjbradshaw/iframe-resizer by #david-bradshaw
parent window:
<script type="text/javascript" src="javascript/iframeResizer.min.js"></script>
....
$("iframe")[0].iFrameResize({
checkOrigin: false,
enablePublicMethods : true,
heightCalculationMethod: "bodyScroll",
});
....
The viewpoint size changer does this :
// set the iframes width and height "before" iframeresizer does stuff to make it look seemless
_this.editor.css({
"width":mapper[size].width,
"height":mapper[size].height
})
Only way I saw the .size() working is from the iframe itself
// fire off a sendMessage cause only way i saw .size() working is from the iframe itself
_this.editor[0].iFrameResizer.sendMessage({
"width":mapper[size].width,
"height":mapper[size].height,
"forceSize":true
});
iframe window
<script>
var iFrameResizer = {
messageCallback: function(message){
console.log("messageCallback")
console.log(message)
if (message.forceSize==true){
console.log(window.parentIFrame)
window.parentIFrame.autoResize(false);
window.parentIFrame.size(message.height); // Set height to 100px
} else {
// apply auto resizing again
}
}
}
</script>
<script type="text/javascript" src="javascript/iframeResizer.contentWindow.min.js"></script>
I was hoping for an easier way like on parent disableIframeResizer() or something, or being able to set .size() from parent since that's where the choose your viewpoint parts live.I can't seem to figure it out :(
My issue is: I need to somehow tell the iframe not to do its resizing when forceSize = true and then when the message comes in then to resize accordingly .
Thanks for a pretty decent library tho!
I don't think I understand your question 100%. But I tried to answer your question as best as I understood.
You can set an iframe's size really simply in html. You can also do it with the help of CSS.
You could do this: <iframe href="https://google.com" width="100%" height="100%">Your Browser Does Not Support Iframe</iframe>.
You could also set the exact diameter like this: <iframe href="https://google.com" width="300px" height="100px">Your Browser Does Not Support Iframe</iframe>
You could also use php to automatically change the diameter of it.
Bevour you mark this as "old", I've searched the whole www for a solution, but I can't find one.
I am making a WebApp that plays sound-effects. I've created a var audio = new Audio() element, and changed his src to the URL of the sound-effect. When I call the audio.play() function, it starts playing the sound effect. In normal safari it works, but when I set apple-mobile-web-app-capable to true in a meta-tag, the WebApp crashes. I tried also to use a hard coded audio tag, to create a audio tag using javascript and to populate a div with a audio-element and it didn't work.
var audio = new Audio;
function set(src){ audio.src = src; }
function play() { audio.play(); }
function pause() { audio.pause(); }
<button onClick="set('https://incompetech.com/music/royalty-free/mp3-royaltyfree/Thief%20in%20the%20Night.mp3')">Set sound</button>
<button onClick="play()">Play sound</button>
<button onClick="pause()">Pause sound</button><br /><br />
<b>Music:</b> "Thief in the Night" Kevin MacLeod (incompetech.com) Licensed under Creative Commons: By Attribution 3.0 License http://creativecommons.org/licenses/by/3.0/
Tnx in advance, Stephan
I need to play a video within an UIWebiview which comes from youtube.
Everything was working fine on older devices (5.1+)
Unfortunately on iOS7 the video is not playing. It starts loading but it'll never start playing. Even if the video has fully been loaded. Only if you stop and press play manually the video starts playing.
Here's some code:
- (void)viewDidAppear:(BOOL)animated;
{
[super viewDidAppear:animated];
if(!self.viewMoviePlayerView.superview) {
[self.viewMediaContentContainer addSubview:self.viewMoviePlayerView];
}
self.viewMoviePlayerView.isScrollingEnabled = NO;
[self.viewMoviePlayerView loadRequest:[NSURLRequest requestWithURL:
[NSURL URLWithString:
[NSString stringWithFormat:#"%#%#", #"http://www.youtube.com/embed/", self.currentSelectedItem.guid]]]];
...
}
Any suggestions on that?
Autoplay is not allowed on recent versions of iOS. You don't suppose to programmatically start downloading data that could cause a cost to the user. I found a way but it's a little tricky:
Show an html string in stead of an url
[webview loadHTMLString:<html> baseURL:[[NSBundle mainBundle] resourceURL]];
The html needs to be an embed player:
<html>
<body style='margin:0px;padding:0px;'>
<script type='text/javascript' src="http://www.youtube.com/iframe_api"></script>
<script type='text/javascript'>
function onYouTubeIframeAPIReady(){
ytplayer=new YT.Player('playerID',{events:{onReady:onPlayerReady, onStateChange:onPlayerStateChange}});
}
function onPlayerReady(a){ a.target.playVideo(); }
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.BUFFERING) {
event.target.playVideo();
}
}
</script>
<iframe id='playerID' type='text/html' width='320' height='240'
src="http://www.youtube.com/embed/xxxxxxxxxxx?enablejsapi=1&rel=0&playsinline=1&autoplay=1" frameborder='0'></iframe>
</body>
</html>
this works fine because the javascript in the iframe API it forces the player to start playing once it loads and every time it starts buffering. I strongly suggest you to read about the youtube API
Put your video id in the embed and thats it!
In my HTML page I have 9 images for dialing numbers and one text box that shows the pressed numbers. I want each of those images to immediately play beep sound when users click on them. I tried to use embed with hidden property and navigate it's source to .wav sound.
It is working OK, but when I press the images one after another immediately, it cannot play sound and just bees once at the end.
Is there any faster way of playing a .wav sound on 'onclick' method?
If you only need to support recent browsers, then HTML 5 offers you the Audio object
to load/buffer your sound:
var snd = new Audio("file.wav");
to play the sound:
snd.play();
to re-cue it to the beginning (so that you can play it again):
snd.currentTime=0;
This answer https://stackoverflow.com/a/7620930/1459653 by #klaustopher (https://stackoverflow.com/users/767272/klaustopher) helped me. He wrote:
HTML5 has the new <audio>-Tag that can be used to play sound. It
even has a pretty simple JavaScript Interface:
<audio id="sound1" src="yoursound.mp3" preload="auto"></audio>
<button onclick="document.getElementById('sound1').play();">Play
it</button>
Here's how I implemented his advice so that clicking on the Font Awesome icon "fa-volume-up" (located on the Web page after "mule.") results in "donkey2.mp3" sound playing (note: mp3 doesn't play in all browsers).
<p>In short, you're treated like a whole person, instead of a rented mule. <audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio><a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a>
You can use embed element for play sounds, but you've to check the formats supported by the different browsers.
Embed element on MDN
<a onclick="playSound('1.mp3')">
<img src="1.gif">
</a>
<div id="sound"></div>
<script>
var playSound = function (soundFile) {
$("#sound").html("<embed src=\"" + soundFile + "\" hidden=\"true\" autostart=\"true\" />");
}
</script>
This code lets you put in a picture button; when click you get a sound. It works with Google Chrome and Microsoft Edge but I can't get it to work in Internet Explorer. I'm using html 5 codes; please copy and paste and add you own samples.
</head>
<body>
<script>
var audio = new Audio("/Sample.wav ");
audio.oncanplaythrough = function ( ) { }
audio.onended = function ( ) { }
</script> <input type="image" src="file://C:/Sample.jpg" onclick="audio.play ( )">
</body>
</html>
more on codes look at
http://html5doctor.com/html5-audio-the-state-of-play/
Example based on accepted answer (Tested in Chrome 70), but I didn't need to re-cue:
<button onclick="snd.play()"> Click Me </button>
<script>
var snd = new Audio("/Content/mysound.wav");
</script>
This is what I would do to play sound effects:
<html>
<body>
<audio id="sfx"><source src="mysound.mp3"></audio>
<button onclick="playsound()" id="button">Play a sound!</button>
<script> function playsound() {
var sfx = document.getElementById("sfx");
sfx.autoplay = 'true';
sfx.load();}
Or you can run this snippet:
function playsound() {
var mysound = document.getElementById("mysound");
mysound.autoplay = 'true';
mysound.load();
}
button {
color: blue;
border-radius: 24px;
border: 5px solid red;
}
body {
background-color: #bfbfbf;
}
<html>
<body>
<audio id='mysound'><source src="click.mp3"><!-- "click.mp3" isn't a sound effect uploaded to the snippet, because I don't think you can upload sfx to snippets. (I'm new to stackoverflow, so there might be a way) But if you actually use a sound effect in that folder that you're using, it works. --></audio>
<button id='btn' onclick='playsound()'>Play a sound!</button>
</body>
</html>