onchange not working in Internet Explorer - html

I have a form with a field like:
<td width='30%' align='center'>
<input name='prod_partnum1' type='text' id='prod_partnum1' size='20' maxlength='20' color='#333333' value='$prod_partnum1'>
</td>
<td width='30%' align='center'>
<input onchange='ceck_modulo1();' id='prod_partnumver1' name='prod_partnumver1' value=''>
</td>
and this is java for check_modulo
function check_modulo1() {
<!---->
if (document.modulo.prod_partnumver1.value == "" || document.modulo.prod_partnumver1.value != document.modulo.prod_partnum1.value) {
document.modulo.prod_partnumver1.value = "";
document.modulo.prod_partnumver1.style.backgroundColor = "#FF0000";
document.getElementById('line1').style.backgroundColor = "#FF0000";
document.modulo.prod_partnumver1.innerHTML = '<audio autoplay="autoplay"><source src="NuclearAlert.mp3" type="audio/mpeg" /><embed hidden="true" autostart="true" loop="false" src="NuclearAlert.mp3" /></audio>';
document.modulo.prod_partnumver2.focus();
document.modulo.prod_partnumver1.focus();
} else {
document.modulo.prod_partnumver1.innerHTML = '<audio autoplay="autoplay"><source src="SmallBlink.mp3" type="audio/mpeg" /><embed hidden="true" autostart="true" loop="false" src="SmallBlink.mp3" /></audio>';
document.modulo.prod_partnumver1.style.backgroundColor = "#008800";
document.getElementById('line1').style.backgroundColor = "#008800";
document.modulo.prod_partnumver2.focus();
}
onchange works just with crome and ff but not with any version of internet explorer 7 , 11
The problem is: the text field prod_partnumver1 is field to write barcode scanned by barcode gun, and when a put barcode with a gun if is crome work perfect with internet explorer, not for working need I click with the mouse in another text field.
With chrome it works perfect when a write with barcode scanner verify the field and if is correct go to the next... like java ceck_modulo1 work.....
Thanks for any help.

onchange support in IE7 is limited, you should use onclick instead. Further reading on the subject.

ok guy's i find solution and i write for other....need mybe tomorrow
ie not work with onchange so....
<SCRIPT LANGUAGE="JavaScript">
var to;
function callMe1(ms) {
clearTimeout(to);
to = setTimeout(function() {
<!---->
if ( document.modulo.prod_partnumver1.value == "" || document.modulo.prod_partnumver1.value != document.modulo.prod_partnum1.value ){
document.modulo.prod_partnumver1.value = "";
document.modulo.prod_partnumver1.style.backgroundColor="#FF0000";
document.getElementById('line1').style.backgroundColor="#FF0000" ;
document.modulo.prod_partnumver1.innerHTML='<audio autoplay="autoplay"><source src="NuclearAlert.mp3" type="audio/mpeg" /><embed hidden="true" autostart="true" loop="false" src="NuclearAlert.mp3" /></audio>';
document.modulo.prod_partnumver2.focus();
document.modulo.prod_partnumver1.focus();
}
else
{
document.modulo.prod_partnumver1.innerHTML='<audio autoplay="autoplay"><source src="SmallBlink.mp3" type="audio/mpeg" /><embed hidden="true" autostart="true" loop="false" src="SmallBlink.mp3" /></audio>';
document.modulo.prod_partnumver1.style.backgroundColor="#008800";
document.getElementById('line1').style.backgroundColor="#008800" ;
document.modulo.prod_partnumver2.focus();
}
}, ms);
}
</SCRIPT>
in this way use the onkeyup function,(not onchange) but wait 200ms in order to give me time
for shot with barcode gun
thank's

Related

Video tag not working on iphone/ipad chrome in Angular

I wrote a few lines code to stream a video. In my code, I'm calling an API to get a link, and that link setting in the src of the video tag and trying to play. And my HTML5 video player works very fine in windows, android, and MAC chrome. Now I just need to play in iPhone/ iPad
HTML code
<video #video playsinline controls="controls" poster="{{imageName}}" preload="metadata" width="100%"
height="250" type="video/mp4">
<source #src [src]="videolink" type=video/mp4>
Your browser does not support HTML5 video.
</video>
<!-- Custom controller -->
<div id="video-controller-id" class="video-controller" fx fxLayoutAlign="space-between center">
<div controls="controls">
<mat-slide-toggle checked={{isToggle}} (change)="toggle($event)">{{cameraStatus}}</mat-slide-toggle>
</div>
<div fxLayout="row">
<div fxLayout="row" class="volume">
<mat-icon matTooltip="{{muteStatus}}" matTooltipHideDelay="500" matTooltipPosition="above"
style="cursor: pointer; color: white;" (click)="videoVolume()">
{{volume}}</mat-icon>
<input #volumeSlider class="volume-slider" id="volumeSlider" type="range" min="0" max="100"
value="50" step="1" (input)="videoVolumeSlider(volumeSlider.value)">
</div>
</div>
<div>
<mat-icon style="cursor: pointer; color: white;" (click)="fullScreen()">fullscreen
</mat-icon>
</div>
</div>
Typescript code
#ViewChild('video') videoTag: ElementRef;
#ViewChild('video') srcTag: ElementRef;
isToggle: boolean = false;
videolink: any;
toggle(event: MatSlideToggleChange) {
this.video = document.getElementById("video");
if (event.checked) {
this.isToggle = true;
this.isProgressBar = true;
this.titleVisibility = "visible";
this.cameraStatus = "CAMERA ON";
this.stationService.getCameraUrl(this.stationId, "mp4").subscribe(
data => {
var urlData = data as any;
this.videolink = urlData.url;
this.srcTag.nativeElement.setAttribute('src', this.videolink);
this.videoTag.nativeElement.load();
var playPromise = this.videoTag.nativeElement.play();
if (playPromise != null) {
this.isProgressBar = false;
}
},
error => {
console.log(error);
});
} else {
this.isProgressBar = false;
this.videoTag.nativeElement.pause();
this.titleVisibility = "hidden";
this.cameraStatus = "CAMERA OFF"
}
}
My stream audio is aac and video is H.264 .Could you please help me how to solve this issue.

Removing any videos from a HTML fragment

I have a (possibly not conforming to any standards) HTML fragment with embedded video. The problem is to remove the subfragment(s) with the video.
It is expected that the video follows this format:
<div data-oembed-url="https://www.youtube.com/watch?v=XXX&feature=youtu.be"><iframe allowfullscreen="allowfullscreen" frameborder="0" height="270" src="https://www.youtube.com/embed/XXX?feature=oembed" tabindex="-1" width=" 480"></iframe></div>
I am entirely unsure whether all data follows this scheme.
I think any div or p containing only the video should be removed, too.
Please help to write Perl code to remove video. Which Perl module do you recommend to use for parsing?
sub RemoveVideo {
my ($str) = #_;
my $attrRe = qr/\s*(?<name>\b\S+\b)\s*=\s*(?<value>"[^"]*"|'[^']*'|[^"'<>\s]+)\s*/;
my $iframeRe = qr{<iframe\b($attrRe)*>\s*</iframe\s*>|<iframe\b($attrRe)*\s*/>}i;
my $divRe = qr{<div\b($attrRe)*>\s*$iframeRe\s*</div\s*>\s*}i;
my $pRe = qr{<p\b($attrRe)*>\s*$iframeRe\s*</p\s*>\s*}i;
$str =~ s/$divRe//gms;
$str =~ s/$pRe//gms;
$str =~ s/$iframeRe//gms; # "голый" iframe (не внутри дива)
return $str;
}
my $Test = <<EOF;
XXX
<IFRAME allowfullscreen="allowfullscreen" frameborder="0" height="270" src="https://www.youtube.com/embed/XXX?feature=oembed" tabindex="-1" width=" 480"></iframe>
<div data-oembed-url="https://www.youtube.com/watch?v=XXX&feature=youtu.be"><iframe allowfullscreen="allowfullscreen" frameborder="0" height="270" src="https://www.youtube.com/embed/XXX?feature=oembed" tabindex="-1" width=" 480"></iframe></div>
<p data-oembed-url="https://www.youtube.com/watch?v=XXX&feature=youtu.be"><iframe allowfullscreen="allowfullscreen" frameborder="0" height="270" src="https://www.youtube.com/embed/XXX?feature=oembed" tabindex="-1" width=" 480"></iframe></p>
YYY
EOF
print RemoveVideo($Test);

HTML5 Video gallery playlist with multiple videos

I have a client that wants a video gallery that has a list of thumbnails on the left and a player area on the right. So far so good. I have some html5, jQuery and CSS that is playing a single video in the right pane when a thumbnail is clicked.
My problem is, my client wants what is in essence two playlist. For instance, a gallery of individuals that had a procedure would have a patient's photo as a thumbnail on the left, when the thumbnail is clicked, a video will start playing on the right about that patients experience. Then under that video there would be other links such as 1 week after surgery, 2 weeks after surgery etc.. Sort of a diary on an individual.
To see what I'm asking for, you can see a working one I have put together at http://www.smartlaserlift.com/video-diaries.html. This is a total hackjob using some ajax and really is not working cross platform the way I'd like.
Here is some markup I am currently working on just to display the thumbnails and play the video on the left. I am looking for suggestions on handling the second playlist or perhaps an idea on scrapping this and maybe a better way of doing it.
The HTML
<div class="video_gallery_container">
<div id="thumbs">
<a class="videoLink" videowidth="680" videoheight="383" videofile="Peggy_Web1" videothumb="peggy-vid-thumb" videocaption="Meet Peggy" videodescription="Meet Peggy as she begins her SmartLaser Lift Journey." ></a>
</div>
<div id="vidContainer">
<div id="videoPlayer">
</div>
</div>
The JavaScript
$(document).ready(function() {
$('a.videoLink').each(function() {
var thumbnailFilePath = 'video/' + $(this).attr('videothumb') + '.jpg';
var videoCaption = $(this).attr('videocaption');
$(this).css('background-image','url('+thumbnailFilePath+')');
$(this).html('<div class="caption">' + videoCaption + '</div><img class="play" src="images/play_icon.png" />');
});
$('.videoLink').click(function(){
var videoFile = $(this).attr('videofile');
var videoPoster = $(this).attr('videofile');
var videoCaption = $(this).attr('videocaption');
var videoWidth = Number($(this).attr('videowidth'));
var videoHeight = Number($(this).attr('videoheight'));
var videoDescription = $(this).attr('videoDescription');
var videoCode = '<video width="'+videoWidth+'" height="'+videoHeight+'" controls autoplay autobuffer><source src="video/'+videoFile+'.ogv" type="video/ogg" /><source src="video/'+videoFile+'.mp4" type="video/mp4" /><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+videoWidth+'" height="'+(videoHeight+40)+'" id="video_player" align="middle"><param name="allowScriptAccess" value="sameDomain"><param name="allowFullScreen" value="true"><param name="movie" value="video_player.swf?videoFile=video/'+videoFile+'.mp4&skinFile=video_skin.swf&videoFileWidth='+videoWidth+'&videoFileHeight='+videoHeight+'"><param name="quality" value="high"><param name="wmode" value="transparent"><param name="scale" value="noscale"><param name="salign" value="lt"><embed src="video_player.swf?videoFile=video/'+videoFile+'.mp4&skinFile=video_skin.swf&videoFileWidth='+videoWidth+'&videoFileHeight='+videoHeight+'" quality="high" width="'+videoWidth+'" height="'+(videoHeight+40)+'" name="video_player" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" scale="noscale" salign="lt" wmode="transparent" allowfullscreen="true" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></video>';
var playerBlock = '<div id="playerBlock"><div id="playerHeader">' + videoCaption + '</div>' + '<div id="player">' + videoCode + '</div><div id="videoDescription">' + videoDescription +'</div></div>';
$('#videoPlayer').html(playerBlock);
$('#videoPlayer').css('display', 'block');
});
});//end document.ready function
Im not sure if you got your links to work, but i need a code that will allow me to simply have 5 thumbnails on the left with a diffrent video playing when each thumbnail in click, similar to what you used, I'm not a coding expert and can not figure this out on my own.

include json value in embed tag

I am unable to set json value to scr attribute of embed tag from javascript file.
$.getJSON("url",function(data){
jsonMovies = data.Movies;
$.each(data.Movies, function(index,value){
numofMovs[i]= index;
if (numofMovs[i] == 'Movie6')
{
var parent = $('embed#video1').parent();
$('embed#video1').remove();
parent.append('<embed type="video/mp4" width="200px" height="200px" id = "video1"
src=value.Video />');
}
}
}
Please let me know the correct syntax for including the json value in src attribute (src=value.Video).
Thanks,
Surabhi
You need to concatenate the value into the string:
parent.append('<embed type="video/mp4"
width="200px"
height="200px"
id="video1"
src=' + value.Video + '/>');
^^^^^^^^^^^^^^^^^^^
There's a considerable difference between:
x = 'hello';
alert(x); // shows hello
alert('x'); // shows x

HTML5 Audio plays music but doesn't show controls in IE9

Regarding the audio on this page: http://ebonytay.com/site/composer.php?clip=getOutOfTown#mediaplayer
The audio controls show up in Chrome and Safari (and in Firefox locally. I'm having problems with a specific live server working but that's irrelevant). In IE9 however, the audio control is invisible. The music is still playing and if you right click on where it's suppose to be, you can play/pause it, it just doesn't show up.
I've tried messing with the z-index. I've tried putting it outside all the divs. I've tried using src= instead of source. I've tried using controls instead of controls="controls". I've tried using the audio tag directly sourcing the file, without any PHP/Javascripting. I'm fairly new to programming so I'm sure some of the code could be written simpler, but it shouldn't be breaking anything. Any help would be appreciated.
Here is all the code for the audio player (not incl. css) on the page:
<?php
$song = "overtureRedRockRise"; // set to starting song
$autoplay = ""; // disable autoplay on page load
$totalSlides = 1; //default amount of slides
$initialSlide = 1; //default starting slide
// Change song to URL parameter defined by links in #clip_nav div
if (isset($_GET["clip"])) // if URL parameter is ?clip=foo
{
$song = $_GET["clip"]; // $song is foo
$autoplay = "autoplay='autoplay'"; // enable autoplay when changing song
}
// Check how many slideshow images exist for current song
while (file_exists("../audio/filmClip_" . $song . "_" . $totalSlides . ".jpg"))
{
$totalSlides++;
}
$totalSlides--; // subtract 1 to get total number of slides for current song
?>
<script>
$(document).ready(function() {
var currentSlide = 1; //default starting slide
var totalSlides; //number of slides for current song
var song; //current song
var slideSpeed; //current slideshow speed
// Get variables from PHP
totalSlides = <?php echo $totalSlides ?>;
song = "<?php echo $song ?>";
// Setup slideshow speeds in milliseconds using JSON
var songSpeed =
[
['overtureRedRockRise',12000],
['getOutOfTown',7000],
['canyonBaby', 5000],
['celestialGuides', 10000],
['springback', 11000],
['hallelujas', 10000],
['myOnly', 8000],
['selfDefense', 10000],
['orchestral', 10000]
]
//go through each song in array
for (i = 0; i < 9; i++)
{
//find the current song
if (song == songSpeed[i][0])
{
//set current slideshow speed
slideSpeed = songSpeed[i][1] + 1000; //add 1 second for loading time
}
}
// Setup slideshow
function changeSlide()
{
// change current slide number
currentSlide++;
// Loop slideshow
if (currentSlide > totalSlides) { currentSlide = 1; }
// Display current slide
$('.song_image').attr('src', '../audio/filmClip_' + song + '_' + currentSlide + '.jpg');
}
// If song has more than 1 image
if (totalSlides > 1)
{
// Play slideshow
setInterval(changeSlide, slideSpeed);
}
// Indicate current song
$('div.filmClip_list.'+song).addClass('currentSong');
});
</script>
<h2><a id="mediaplayer"> SCORE AUDIO LIBRARY</a></h2>
<div id="audio_clips">
<!-- Song List -->
<div id="clip_nav">
<div class="filmClip_list overtureRedRockRise">Overture - Red Rock Rise</div>
<div class="filmClip_list getOutOfTown">Get Out of Town Firehorse</div>
<div class="filmClip_list canyonBaby">Lady Sedona Vortex</div>
<div class="filmClip_list celestialGuides">Celestial Guides</div>
<div class="filmClip_list springback">Springbank Park / Lawson Road</div>
<div class="filmClip_list hallelujas">Hallelujahs</div>
<div class="filmClip_list myOnly">My Only</div>
<div class="filmClip_list selfDefense">Self Defense</div>
<div class="filmClip_list orchestral">The Return of the Chevalier <i>(orchestral)</i></div>
</div><!-- end #clip_nav-->
<!-- Slideshow -->
<div id="image_holder">
<img class="song_image" src="../audio/filmClip_<?php echo $song ?>_<?php echo $initialSlide ?>.jpg" width="600" height="400" alt="Slideshow" />
</div><!-- end #image_holder-->
<!-- Audio -->
<div id="audio_player">
<audio controls="controls" preload="auto" <?php echo $autoplay ?>>
<source src="../audio/filmClip_<?php echo $song ?>.ogg" type="audio/ogg" />
<source src="../audio/filmClip_<?php echo $song ?>.mp3" type="audio/mpeg" />
Your browser does not support audio. Please upgrade your internet browser to the latest version here.
</audio>
</div><!-- end #audio_player -->
</div><!-- end #audio_clips -->
It's this rule in style_2011.css:
body.composer audio {
height: 32px;
width: 100%;
}
Specifically, if you set height to 45px or more then the controls will appear.
Just remove the height of the audio tag.