Here is my code:
if (jQuery.browser.msie && !jQuery.browser.version == 9) {
}else{
var myVideoFrame = document.getElementById("myVideoFrame");
myVideoFrame.textTracks[0].mode = "hidden";
}
I am using JW Player but as I need my videos and video contents make indexable by search engines I created html5 video tag with source and track tags in it and implemented JW player setup javascript code on existing video id. In this case I needed to hide existing tracks cause I see double subtitles. Via code above it is hidden everywhere except IE 9 and gives me this error. Please see attached image. How can I hide tracks for IE9 ?
I found this article and added code written below:
<script type="text/javascript">
var ie9 = false;
</script>
<!--[if IE 9]>
<script>
ie9 = true;
</script>
<![endif]-->
<script type="text/javascript">
if (ie9 == false) {
var myVideoFrame = document.getElementById("myVideoFrame");
myVideoFrame.textTracks[0].mode = "hidden";
}
</script>
Now this code works in every browser except IE9. So no error in console.
Related
I have a HTML page including Javascript which is intended to allow a video (actually just audio content in this case) to play using HTTP Live Streaming on any browser. In most cases it uses hls.js but, in the case of Apple products, I need to do things differently as Safari has native HLS support.
The full page is reproduced below but the important lines are these:
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'music.m3u8';
video.addEventListener('canplay', startPlaying);
//document.addEventListener('DOMContentLoaded', startPlaying);
}
What should happen is that when the canplay event fires the startPlaying() function is called and this makes visible a button that the user can press to begin playing the video. However, on my friend's iPhone 8plus (iOS 11.3.1), this doesn't work: no button is ever visible. If, instead, I comment out the video.addEventListener() line and replace it with the document.addEventListener() line then it all works fine: the button is made visible and he can play the stream.
Can anyone spot what I'm doing wrong? Could be a rookey mistake as I'm not very experienced with this web/script stuff, gives me nose bleeds... I could, of course, leave it with the DOM load approach but it's not right and I'd rather be right.
<!DOCTYPE html PUBLIC "-//Netscape Comm. Corp.//DTD HTML//EN">
<html>
<script src="hls.js/dist/hls.js"></script>
<head><meta http-equiv="content-type" content="text/html; charset=UTF-8"></head>
<body>
<video id="video"></video>
<button id="play" hidden>Loading</button>
<script>
'use strict';
var video = document.getElementById('video');
var playButton = document.getElementById('play');
function startPlaying() {
// For mobile browsers the start of playing has to
// be performed by a user action otherwise it will
// be ignored
playButton.addEventListener('click', function() {
video.play();
video.muted = false;
video.volume = 1;
playButton.innerHTML = "Playing";
});
playButton.hidden = false;
playButton.innerHTML = "Ready to play";
}
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('music.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, startPlaying);
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'music.m3u8';
video.addEventListener('canplay', startPlaying);
//document.addEventListener('DOMContentLoaded', startPlaying);
}
</script>
</body>
</html>
From the investigations in the other question, the workaround is to wait on the event loadedmetadata, so in my case video.addEventListener('loadedmetadata', startPlaying), as this is the last event you're going to get from the HTML5 video element on Safari unless you're in the user-controlled white list. Confirmed that this works on iOS 11.3.1.
I have this video as a background with Bootstrap that I would like to autoplay on page load. It works fine with desktop Chrome, but not so much for mobile.
It is a small, .mp4 file that is created using:
<video class="video-fluid" id="video1" autoplay loop>
<source src="videos/light-swaying.mp4" type="video/mp4" />
</video>
The only thing that shows up on mobile is just a still of the first frame, not a moving video. I added this script at the bottom of my body, and it actually starts the video fine. It loops and everything:
<script type="text/javascript">
var video = document.getElementById('video1');
var aboveView = document.getElementById('video-carousel-example2');
aboveView.addEventListener('click', function () {
video.autoplay = true;
video.play();
}, false);
</script>
The only problem is, though, I have to click on the video to actually start it. I tried this script in the same spot, and no luck whatsoever:
<script type="text/javascript">
var video1 = document.getElementById('video1');
video1.autoplay = true;
video1.play();
</script>
So does anyone have any idea how to fix this and make it play automatically?
Which version of Chrome? Because:
"Autoplay was disabled in previous versions of Chrome on Android because it can be disruptive, data-hungry and many users don't like it."
Source:
https://developers.google.com/web/updates/2016/07/autoplay
Mostly we too find this issues in ipad and tablets because ipad and tablet doesnt support the autoplay
To see a full list of these restrictions, see the official docs: https://webkit.org/blog/6784/new-video-policies-for-ios/
for that you need to trigger your click function by checking your monitor resolution i am not familiar with javascript so i am written this using jquery
$(document).ready(function(){
var screenWidth = $( window ).width();
if(screenWidth <= 1024)//just i am checking for ipad only
{
$('#video-carousel-example2).trigger('click');
}
$('#video-carousel-example2).click(function(){
var video1 = document.getElementById('video1');
video1.play();
})
});
I am trying to target specific browsers and depending on the browser I would like to display different links. My issues is that I have some pdf portfolios but they will only open in IE and the rest of the browsers give a message to download adobe reader.
My test code:
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
//For Firefox
if (browser == 'Firefox') {
document.write('Download');
}
//For Safari
if (browser == 'Safari') {
document.write('<'+'a href="test.pdf" download="test.pdf">Download</a>');
}
//For Chrome
if (is_chrome) {
document.write('<'+'a href="test.pdf" download="test.pdf">Download</a>');
}
//For IE
if(document.documentMode) {
document.write('View PDF');
}
This is what I have pulled together from searching but is not working. I want to view the pdf if in IE or download it if it is in another browser.
Feature detection is recommended over browser detection but in your case I don't think that will help. Here is a good script to detect the browser: WhichBrowser
I want to play a beep sound on Button Click.
My application is not using HTML5 so we cant use HTML5 DOCType.
Code i have used is-
function PlaySound() {
if (soundObject != null) {
document.body.removeChild(soundObject);
soundObject.removed = true;
soundObject = null;
}
soundObject = document.createElement("embed");
soundObject.setAttribute("src", "Audio/Ping.wav");
soundObject.setAttribute("hidden", true);
document.body.appendChild(soundObject);
}
The above code working fine Chrome.
I have tried many solutions but none of them worked.
I have the following code:
<html>
<head>
</head>
<body>
<script type="text/javascript">
var frame = document.createElement('iframe');
frame.id = 'myFrame';
document.getElementsByTagName('body')[0].appendChild(frame);
var context = frame.contentWindow.document;
context.body.innerHTML = 'testing';
</script>
</body>
</html>
This creates a simple iframe containing my text: 'testing'.
This works perfectly in Chrome, but Firefox and IE are rendering an empty iframe.
Any idea what I'm doing wrong?
You can do something like this:
var frame = document.createElement('iframe');
frame.id = 'myFrame';
document.getElementsByTagName('body')[0].appendChild(frame);
frame = (frame.contentWindow) ? frame.contentWindow : (frame.contentDocument.document) ? frame.contentDocument.document : frame.contentDocument;
frame.document.open();
frame.document.write('testing');
frame.document.close();
Javascript is interpreted differently by all browsers, so it's just a matter of using the common-approach. This should work across all browsers.
Give it a try.
Some browsers explicitly prevent things like this so you can't, e.g., load somebody's bank website in a frame and interact with it in Javascript. This link:
http://spyder.wordpress.com/2006/05/31/hacking-around-firefox-security-in-order-to-actually-accomplish-something/
suggests that there are some bugs with how an empty iframe is initialized, and this one:
http://www.iframehtml.com/iframe-security.html
has some resources for how to deal with them.
Rewrote the last line innerHTML seems like a chrome only thing.
<script type="text/javascript">
var frame = document.createElement('iframe');
frame.id = 'myFrame';
document.getElementsByTagName('body')[0].appendChild(frame);
var context = frame.contentWindow.document;
context.write('testing');
</script>
JS fiddle here confirms it's working in IE, Chrome and Firefox:
http://jsfiddle.net/thebeebs/mDMaj/