Since not all browsers support MPEG DASH for live video (safari), I am looking for a way to display 3 iframes based on the client. I think client sniffing is needed in this case because I want one page for all.
Is there a way to show a specific iframe based on the client (or iframe wrapped in a div).
iframe 1 - display on safari only
iframe 2 - display on IE 7 only
iframe 3 - display on all others
===========
1 will output HLS video
2 will output rtmp flash
3 will output MPEG Dash
You can use some javascript to detect the browser and then change the iframe 'src' attribute. One library is bowser: https://github.com/lancedikson/bowser
Html:
<iframe id="iframe_id"></iframe>
Javascript
const iframe = document.getElementById('iframe_id')
// do here your logic
if (bowser.msie && bowser.version == 7) {
iframe.setAttribute('src', 'ie7url');
} elseif(bowser.safari) {
iframe.setAttribute('src', 'safariurl');
} else {
iframe.setAttribute('src', 'defaulturl');
}
Following this question, you can detect the user agent:
var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
var is_explorer = navigator.userAgent.indexOf('MSIE') > -1;
var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
var is_safari = navigator.userAgent.indexOf("Safari") > -1;
var is_opera = navigator.userAgent.toLowerCase().indexOf("op") > -1;
Related
I have a simple video player which is inserted into page within an iframe, now I want when the video player is visible play the video otherwise pause the video. to achieve that am using the intersection observer function.
Here is html skeleton
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</body>
Here is js
var configFromParent = null;
window.addEventListener("message", function (event) {
var data = event.data;
if (data.action == "config") {
configFromParent = data;
}
var observer = new IntersectionObserver(function(entries) {
//console.log(entries);
if(entries[0]['isIntersecting'] === true) {
if(entries[0]['intersectionRatio'] === 1)
document.querySelector("#message").textContent = 'Target is fully visible in screen';
else if(entries[0]['intersectionRatio'] > 0.5){
$("#videoplayer")[0].play();
document.querySelector("#message").textContent = 'More than 50% of target is visible in screen';
}
else{
document.querySelector("#message").textContent = 'Less than 50% of target is visible in screen';
}
}
else {
$("#videoplayer video")[0].pause();
}
}, { threshold: [0, 0.5, 1] });
observer.observe(document.querySelector(".videoplayer"));
});
Now when scrolling my page nothing is happening, but when I change the parent src link to child iframe link everything works perfectly, but I want the iframe to be inside a parent iframe and when the video player is not visible pause the video otherwise play the video
What do I need to do solve this problem?
Observer is totally functional. https://codesandbox.io/s/loving-zhukovsky-chdds?file=/index.html this sandbox contains you html setup (not secure ofcourse). Scroll page down to see how message changes.
Secure frames behave in the same manner. You don't have to worry about it. But don't forget that IE may have no observer, you should handle it.
And I still assume that the problem in the post messaging
I try to create a one liner iframe that users can add in their sites and this iframe adress is my site.
My problem is that if i want it to be able to become full screen i need to supply them with js code and i don't want it i want it to fetch the js code from my site.
The js that i use to make full screen when needed is :
<script>
window.addEventListener('message', receiveMessage, false);
function receiveMessage(evt) {
if (evt.origin === 'site src') {
//if (isNaN(evt.data)) return;
var iframe = document.getElementById('someId');
if (event.data.height !== 0) {
iframe.height = 100 + "%";
iframe.width = 100 + "%";
iframe.style.position = 'fixed';
iframe.style.top = '2%';
iframe.style.left = '2%';
}
else {
iframe.height = 110 + "px";
iframe.width = 300 + "px";
iframe.style.position = 'relative';
}
}
}
</script>
This script currently written at the client the one that use the iframe.
The iframe looks like.
<iframe id="expertips_iframe" src="my site adress" width="300px" height="110px" frameBorder="0" scrolling="no"></iframe>
I want the iframe line to fetch the js code from my site and inject it to the user/client that use the iframe, or any other way as long as i do it (the iframe and the js) in one line.
Hope it is clear enough and thank you.
I'm working on a HTML5 (for HLS videos) video player and i'm having problems to do trickplay actions (ff and rewind). the main issue is that the player doesn't seem to work with the currentTime attribute. is there any other property that i could use, don't know something like seekByTime , or SkippTo .
Any help?
this is my code (actually not working) :
function fastForward(mediaPlayer){
var a=mediaPlayer.duration;
var b=mediaPlayer.currentTime;
if(a>b){
mediaPlayer.currentTime=mediaPlayer.currentTime+10;
}
};
function rewind(mediaPlayer){
var a=mediaPlayer.duration;
var b=mediaPlayer.currentTime;
if(b>10){
mediaPlayer.currentTime=mediaPlayer.currentTime-60;
}
};
I try changing currentTime on Chrome 36, and IE 11 and run like a charm. In iOS you can also use PlaybackRate with negative values.
The code that I tested:
function changeCurrentTime(direction) {
if (direction == "-" && _video.currentTime > 5)
_video.currentTime -= 5;
else if (direction == "+" && _video.currentTime < _video.duration + 5)
_video.currentTime += 5;
}
In http://jsfiddle.net/5v2etjfg/6/ you can find my complete example.
Inspired on: https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/HTML5_playbackRate_explained
Hope this help.
I need to include some sound files on a website, i recorded them and used the super complicated:
<a href="seo.html" onmouseover="new Audio('sounds/seo.mp3').play()">
to play them when the user scrolls over with the mouse. There are a total of four links on the website.
The problem is, when i mouse over one of them it starts playing, and then if i mouse over another it plays that one as well. If i move the mouse really fast accross the links i end up getting Giberish because all files are being played at the same time. How do i stop this ??
Ideal would be that the others CANNOT be played until the current playing is finished :)
An approch below.
Note, untested ;-)
HTML
a sound link -
a sound link -
a sound link -
a sound link
JS
var links = document.querySelectorAll('a.onmousesound');
var currentPlayedAudioInstance = null;
var onHoverPlaySound = function(element) {
if (currentPlayedAudioInstance &&
currentPlayedAudioInstance instanceof Audio) {
// is playing ?
// http://stackoverflow.com/questions/8029391/how-can-i-tell-if-an-html5-audio-element-is-playing-with-javascript
if (!currentPlayedAudioInstance.paused && !currentPlayedAudioInstance.ended && 0 < currentPlayedAudioInstance.currentTime) {
return false;
}
}
var file = element.getAttribute('data-file');
currentPlayedAudioInstance = new Audio(file);
currentPlayedAudioInstance.play();
};
for (var i = 0; i < links.length; i++) {
link.addEventListene('onmouseover', function() {
onHoverPlaySound(links[i]);
});
};
Because IOS prevents auto-loading of video it is necessary to add a 'poster' image to indicate a play button (in this case).
However I also want to display a loading image for slow connections by swapping the poster image for a loading image when loading has started.
The problem is on normal connections the play button shows for a split second before the loading image.
So how can I show the play poster image for when it is detected that no loading is going to take place until the play button is pressed.
if ( yourVideoElement.readyState === HAVE_ENOUGH_DATA ) {
// it's loaded
}
https://developer.mozilla.org/en/DOM/HTMLMediaElement
UPDATE
Or you could use jQuery:
var videoDuration = $html5Video.prop('duration');
var updateProgressBar = function(){
if ($html5Video.prop('readyState')) {
var buffered = $html5Video.prop("buffered").end(0);
var percent = 100 * buffered / videoDuration;
//Your code here
//If finished buffering buffering quit calling it
if (buffered >= videoDuration) {
clearInterval(this.watchBuffer);
}
}
};
var watchBuffer = setInterval(updateProgressBar, 500);
You have to check two things, first the networkState and the readyState additionally you have to make sure, that either the preload attribute has a value other than 'none' or you are using an autoplay attribute. In this case you can write the following code (better to wait untill window.onload):
$(window).on('load', function(){
var myVideo = $('video');
if(myVideo.prop('readyState') < 1 && myVideo.prop('networkState') != 2){
//no automatically loading code
myVideo.prop('poster', 'noloading.jpg');
}
});
This is not tested, readyState == 0 means that there is no data and networkState 2 means it does not try to load.
With a timeout:
$(window).on('load', function(){
var myVideo = $('video');
if(myVideo.prop('readyState') < 1 && myVideo.prop('networkState') != 2){
//probably no automatically loading code
setTimeout(function(){
if(myVideo.prop('readyState') < 1 && myVideo.prop('networkState') != 2){
//no automatically loading code
myVideo.prop('poster', 'noloading.jpg');
}
}, 1000);
}
});