I want to create a program to show iframes from a specific server which sends JPEG streams through HTTP and play sound from another HTTP port together and synced. I've searched in the whole forum but didn't find a straight forward answer to it.
I've created the following HTML5 code, it works but the problem is the image streams coming earlier than voice and it is out of sync. My aim is to sync the image stream and voice together by setting a delay or buffer for image.
Here is my code:
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<IFRAME id="video" src="http://192.168.1.111:8081" width="800px" align="center" height="600px" scrolling="no" frameborder=no marginheight="0px"></IFRAME>
</div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-6">
<audio controls autoplay>
<source src="http://192.168.1.114:8000/sound2" type="video/ogg">
</audio>
</div>
<div class="col-md-4"></div>
</div>
I would appreciate if you post any solution to this problem.
Thanks.
Related
I am using Visual Composer / WPBackery to display a "services-image" block on my page. Visual Composer or my theme seems to be using the class="attachment-large size-large" by default which is causing my images to be larger than what is required.
A recent test on GTMetrix showed The following images are resized in HTML or CSS. Serving scaled images could save 226.2KiB
I would like to edit the Visual Composer plugin or the theme files in order to use the class="attachment-small size-small"
This is what is shown on my page:
<div class="wpb_column vc_column_container vc_col-sm-4"><div class="vc_column-inner"><div class="wpb_wrapper">
<figure class="wpb_content_element overlay-info no-mask ">
<img width="768" height="512" src="http://rdz.nzl.mybluehost.me/wp-content/uploads/2020/02/YOUR-EXPERIENCE-1024x683.jpg" class="attachment-large size-large" alt="">
<figcaption class="d-flex">
<div class="align-self-center mx-auto">
<h4 class="mb-0 text-uppercase letterspace-4">YOUR EXPERIENCE</h4>
</div>
</figcaption>
</figure>
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p style="text-align: center;">More than anything, I aspire to enhance your experience.<br>
I do that by having fun with you.<br>
It is the single most important aspect of your day.</p>
</div>
</div>
</div></div></div>
the image being used is http://rdz.nzl.mybluehost.me/wp-content/uploads/2020/02/YOUR-EXPERIENCE-1024x683.jpg I would like to use the optimized /resized version of this image instead.
Please assist me in where I can change the default image attachment class which Visual Composer / WPBackery uses?
Thank you
Page on URL https://www.topmazoretkypraha.com/fotogalerie.html cannot load in Chrome properly. When I look to console in devtools there is 5 times an error : "Failed to load resource: net::ERR_SPDY_PROTOCOL_ERROR" .
Because of that 5 thumbnails of pictures of 5 galleries don't appear on screen. I can find what requests are behind these errors. It is for example GET of "https://www.topmazoretkypraha.com/phpThumb/phpThumb.php?src=/fotogalerie/2018/Kromeriz/img00001.jpg&w=120&h=120&hash=fb0137670311c4ace04dce839d03701e" .
Because it is all about website hosting it could be hard to debug. But I think there is a Nginx and than Apache with PHP. The phpThumbnailer is requested by Chrome from HTML source. What should be my steps to solve this problem?
I searched google but I'm rather confused than clever from that. So I decided to ask here.
include lines 108-132 of https://www.topmazoretkypraha.com/fotogalerie.html
<div class="panelGaleries" align="justify">
<span class="orangetitle">Fotogalerie za rok 2018</span><br /><br />
<span class="bodytext">
<div style="position:relative;">
<img src="/phpThumb/phpThumb.php?src=/fotogalerie/2018/Kromeriz/img00001.jpg&w=120&h=120&hash=fb0137670311c4ace04dce839d03701e" alt="O poklad hanáckých Atén" />O poklad hanáckých Atén
</div>
<div style="clear:both;"> </div>
<div style="position:relative;">
<img src="/phpThumb/phpThumb.php?src=/fotogalerie/2018/Chodov/img00001.jpg&w=120&h=120&hash=58dadfc8c122ee14c51487e5987a43d0" alt="Majorettes Chodov" />Majorettes Chodov
</div>
<div style="clear:both;"> </div>
<div style="position:relative;">
<img src="/phpThumb/phpThumb.php?src=/fotogalerie/2018/Kolin/img00001.jpg&w=120&h=120&hash=e540c90e1f1608608984fcaeb8a3093f" alt="Kmochův Kolín" />Kmochův Kolín
</div>
<div style="clear:both;"> </div>
<div style="position:relative;">
<img src="/phpThumb/phpThumb.php?src=/fotogalerie/2018/MS/img00001.jpg&w=120&h=120&hash=8f9f4b9fcd7d06a760c5c068cd413363" alt="IFMS - Mistrovství světa" />IFMS - Mistrovství světa
</div>
<div style="clear:both;"> </div>
<div style="position:relative;">
<img src="/phpThumb/phpThumb.php?src=/fotogalerie/2018/wannado/img00001.jpg&w=120&h=120&hash=ddae43d181ff7378fed770527a92714d" alt="Wannado festival" />Wannado festival
</div>
<div style="clear:both;"> </div>
</span>
</div>
there should be no error when data is loaded, but still there is
The problem was that web hosting adds HTTP header Content-Encoding: gzip for all the PHP content even when the Content-Type: image/jpeg is in the output from that script. For the hotfix I added HTTP header Content-Encoding: none into that script. And it worked. But now I am asking web hosting provider to not add the wrong header if Content-Type: image/jpeg is present. At HTTPS it makes sense.
I am using twitter bootstrap template in My laravel app.
I need add image which include in my imgs folder in public folder home.jpg. how can I add this image to following bootstrap scripts.
<div class="item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
Laravel By default takes public folder path public/
Let's say your home.jpg file is in public/image/home.jpg
so in your html it will be <img src="http://localhost:8000/image/home.jpg">
Laravel also has specific methode {{ HTML::image('image/home.jpg') }} for this.
For mere refer http://laravel-recipes.com/recipes/185/generating-an-html-image-element
OK finally I got solutions this is working
<img class="first-slide" src="{{asset('/imgs/1.gif')}} " alt="First slide">
I already made a homepage including the grid system of bootstrap, but now im using mainly includes to keep everything tidy but the grid system doesnt seem to work at all. even if i copy the example code of bootstrap itself.
this is the first code of my content php file. including obviously the row part. These are stacked ontop of eachother not next to eachother.
PS: the .content-wrapper has no styling yet so its not affecting anything and the .content has only top and bottom padding.
<div class="content-wrapper">
<div class="content">
<h1>The Test Heading</h1>
<p>
text
</p>
</div>
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p>Button Button</p>
</div>
</div>
</div>
</div>
here is the index.php file i got with the content area
<div class="container">
<!-- Navigation area -->
<?php include_once ("php/navigation.php");?>
<!-- Carousel -->
<?php include_once ("php/carousel.php");?>
<!-- Content area -->
<?php include_once ("php/content.php");?>
</div> <!-- end of container -->
im not sure if it has to do something with including a file and the grid system, but carousel, container etc all working fine so it should find the css file after being included.
Sidequestion: is a method like this useful? working with includes only? or is it rather non-practical?
So what do u want to do with grid system, because you only have one col so it will just go from begining of file to col 6 it will look like it doesnt do anything rly? You can put lets say and then your div with col and it will move it and so on.
I'm new to PHP and i use the include function to include a header file that has my db connections and my menu. On a body page I'm using a iframe to include a aside that needs to go on many different pages. The issue arises when i hit click on one of the hyperlinks of the aside that is in the IFRAME it will take me to the proper page BUT will RE-include the header in that portion of the code. I was wondering if there is any alternatives OR ways to insure the header doesn't reload in my iframe. Here is a copy of my code.
Main PAGE
<?php
include_once("include/header.php");
?>
<div id="content">
<div id="left" class="sidebar">
<iframe src="aside.php" height="550" frameborder="0" width="210" scrolling="no" allowtransparency="true" rel="nofollow"></iframe>
</div>
Aside page
<div class="imgholder">
<p class="employeename">Pablo Israel Penaloza</p>
<img src="img/Pablo-Peñaloza.jpg" width="202" height="150" class="imgemployee">
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li>Informacion Personal</li>
<li>Contacto</li>
<li>Contact de Emergencia</li>
<li>Dependientes</li>
<li>Imigracion</li>
<li>Deberes</li>
<li>Salario</li>
<li>Supervisor</li>
<li>Calificaciones</li>
<li>Membresias</li>
</ul>
</div>
<!--End sidebarmenu1-->
</div>
Thank you
You'll need to use javascript for the detection, or make separate URLs for pages that will be included in the iframe. This should help you:
Check if site is inside iframe
To not use an iframe would be best.
It's much easier if you just use include(). You can make the content that would reside in the iframe inside of a scrolling DIV instead. Modern sites do this and update the <div> with AJAX.
To make it scroll
<div style='width:210px;height:550px;overflow:auto'>
<?php include($_SERVER['DOCUMENT_ROOT'].'/includes/aside.php'); ?>
</div>
Static
<div style='width:210px;height:550px;'>
<?php include($_SERVER['DOCUMENT_ROOT'].'/includes/aside.php'); ?>
</div>