I have HTML content which includes texts, images, and videos. The text and images work fine without any problems, but the videos never show up. I have tried many plugins regarding HTML, for example: flutter_html and flutter_html_view, and they all do not show the video.
Sample of the HTML content with video that I want to display:
<p>Hello world 25-3-2019 :</p>
<p> </p>
<p>
<iframe
src="https://www.youtube.com/embed/W8TrvLoPrfQ"
width="400"
height="300"
frameborder="0"></iframe>
</p>
Does anyone have an idea about displaying this content inside a widget?
I'm not sure if this will work for you but you can try the webview_flutter package. A warning though: it is currently in developers preview, and can be found here.
You can give the inline widget some html string to render, for example:
WebView(
initialUrl: new Uri.dataFromString("<p>Hello world 25-3-2019 :</p>
<p> </p
<p>
<iframe
src="https://www.youtube.com/embed/W8TrvLoPrfQ"
width="400"
height="300"
frameborder="0"></iframe>
</p>", mimeType: "text/html", encoding: utf8).toString(),
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
),
This code example does require you to pass it a controller: final Completer<WebViewController> _controller = Completer<WebViewController>(); and it is also safe practice to dispose of said controller when you are about to dispose the screen:
#override
void dispose() {
super.dispose();
_controller.dispose();
}
Let me know if this helps.
Related
I have a PDF file as a bytes array and I want to display it into <object element in .NET MAUI hybrid application.
I tried it on windows and it works fine, but on Android it doesn't work, it shows blank white content. I didn't try on iOS because it doesn't available for me right now.
I tried to display the PDF file from URL in <iframe but it also works on Windows only, but it shows blank content on android
My code:
<div style="border:1px solid red;padding:10px;">
<iframe style="width:100%;height:600px;" src="#bookPath"></iframe>
</div>
<div style="border:1px solid orange;padding:10px;">
<object data="#bytesText" width="900" height="600" type="application/pdf"></object>
</div>
#code{
string bytesText = string.Empty;
private string bookPath= "https://my-url/book_1.pdf";
protected override async Task OnInitializedAsync()
{
var bytes = await (await Http.GetStreamAsync("api/book/bytes")).ToByteArrayAsync();
bytesText = $"data:application/pdf;base64,{Convert.ToBase64String(bytes)}";
}
}
So, any ideas about this problem?
Thank you
I need to hide the icon encircled on the picture below? How can I hide it? I'm using react-player.
Pls check this codesandbox
CLICK HERE
<ReactPlayer
url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
playing={true}
volume={1}
width="100%"
height="100%"
controls
/>
The HTML5 <Video /> tag supports disabling this feature via the disablepictureinpicture attribute. This is still an experimental feature, and might not work in all browsers.
Pass the disablePictureInPicture html attribute via the ReactPlayer's config. If the Picture in Picture control doesn't disappear try setting controlsList: 'nodownload' as well.
const config = {
attributes: {
disablePictureInPicture: true,
controlsList: 'nodownload'
}
};
const App = () => (
<div style={styles}>
<ReactPlayer
url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
playing={true}
volume={1}
width="100%"
height="100%"
config={config}
controls
/>
<h2>Start editing to see some magic happen {'\u2728'}</h2>
</div>
);
I have tried the following
Json result
{
"details":"<h1>Heading</h1><p>Description</p>"
}
<amp-state id="remoteData" src="/api/get-result" >
</amp-state>
<div [text]="remoteData.details"></div>
Now its showing like the following
<div [text]="remoteData.details"><h1>Heading</h1><p>Description</p></div>
html tags are listed as text.Actually json result is coming from an api call.Is there any way to achieve this.
I have also tried to load it using amp-iframe. Created an additional page on the server and called the same using iframe. Content is loading properly on that but I am unable to resize the div according to content height as both origin are the same.
<amp-iframe width="200" id="myframe" height="40" layout="responsive" resizable sandbox="allow-scripts " frameborder="0" src="https://demo.com/api/get-html"></amp-iframe>
script used for dynamically setting height of parent amp-iframe component
<script>
window.parent.postMessage({
sentinel: 'amp',
type: 'embed-size',
height: document.body.scrollHeight
}, '*');
</script>
Using amp-bind I am not able to display the html content,using amp-iframe I am not able to adjust iframe height according to content.Can anyone help please.
Thanks
you can do this with an amp-list / mustache template. however you're still restricted with a specific height. and you can't inject arbitrary html. Better to render the content on the server side.
if you format your json like so:
{
"items" : [ {
"heading":"Heading",
"description":"Description",
"listItems": ["one", "two", "three"]
} ]
}
mustache template.
<amp-list width="auto" height="50" src="https://myserver/stuff/remoteData.json" max-items="1">
<template type="amp-mustache">
<h1>{{heading}}</h1>
<p>{{{description}}}</p>
{{#listItems}}
<li>{{.}}</li>
{{/listItems}}
</template>
</amp-list>
I am trying to create chrome extension which will read text inside the particular TAG from the Webpage ...
but not able to read value
I need to pick Text inside the tag definition excluding html tags..
here i want to read the value from the tag "definition"
output:is an overwhelming urge to have of something is often connected with money
suppose web page is like this
<div id="definition">
<div class="section blurb">
<p class="short"><i>Greed</i> is an overwhelming urge to have <i>more</i>
of something
<p class="long"><i>Greed</i> is often connected with money</p>
</div>
</div>
this is what i was trying
popup.html
<script>
var newwin = chrome.extension.getBackgroundPage();
newwin.get();
</script>
background.html
<Script>
function get()
{
var myDivObj = document.getElementById("definition");
if ( myDivObj ) {
alert (myDivObj.innerHTML);
}else{
alert ( "Alien Found" );
}
}
</Script>
I moved my script from the background page to content scrit and it worked like charm..
but was just wondering why dint work in background page..?
Following is my html content which i want to show in the webview using android sdk. It will displays only
//Please
But when I put this HTML content into the browser then it shows differently.
<br /><br />Read the handouts please for tomorrow.<br /><br /><!--homework help homework
help help with homework homework assignments elementary school high school middle school
// --><font color="#60c000" size="4"><strong>Please!</strong></font>
Please suggest how to resolve this problem
I have another problem that in HTML content there is a tag
<img src="http://www.homeworknow.com/hwnow/upload/images/tn_star300.gif" border="0" />
in this images does not shows.
Use web.loadDataWithBaseURL instead of web.loadData (And don't forget to escape strings where it's needed)
You need to add internet permission to download images and view them in your manifest file.
This example works for me:
public class SimpleMusicStream extends Activity {
#Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
WebView wv = (WebView) findViewById(R.id.WebView01);
final String mimeType = "text/html";
final String encoding = "UTF-8";
String html = "<br /><br />Read the handouts please for tomorrow.<br /><br /><!--homework help homework" +
"help help with homework homework assignments elementary school high school middle school" +
"// --><font color='#60c000' size='4'><strong>Please!</strong></font>" +
"<img src='http://www.homeworknow.com/hwnow/upload/images/tn_star300.gif' />";
wv.loadDataWithBaseURL("", html, mimeType, encoding, "");
}
}
And don't forget to add:
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
in your AndroidManifest.xml file
Either you can do it as above or put html file into the asset folder and the use it loke this to display it
view.loadUrl("file:///android_asset/FILENAME.html");
for image display you can do it like
String str= " img src=\"http://www.homeworknow.com/hwnow/upload/images/tn_star300.gif\" alt=\"this is img\"ALIGN=\"right\"/>";
wv.loadData(str, "text/html", "utf-8");