I am trying to insert a Facebook embed video on my HTML code. Following is the sample code provided in the Facebook player documentation.
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
<!-- Load Facebook SDK for JavaScript -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId: "{your-app-id}",
xfbml: true,
version: "v3.2"
});
// Get Embedded Video Player API Instance
var my_video_player;
FB.Event.subscribe("xfbml.ready", function(msg) {
if (msg.type === "video") {
my_video_player = msg.instance;
}
});
};
</script>
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
<!-- Your embedded video player code -->
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-allowfullscreen="true"></div>
</body>
</html>
But on iOS devices, it is playing only in fullscreen mode. Is there a way I can play video without going to fullscreen?
Thanks!
Related
I can play a song right after 5 seconds in my chrome browser but it doesn't work in safari. when I click on button text directly, it plays fine in safari too.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function playAudio(){
var a=new Audio("on.mp3");
a.load();
a.play();
}
$(document).ready(function(){
setTimeout(function() {
playAudio();
}, 5000);
});
</script>
</head>
<body>
Audio will start playing after 5 second
<p id="playButton" onclick="playAudio()">button</p>
</body>
</html>
That's normal because of Safari auto-play policy that require a user gesture to play media : https://webkit.org/blog/7734/auto-play-policy-changes-for-macos
I add videosphere using aframe. But in android browser it does not work. I am using Samsung S6. In S6 I checked many examples along with my code. It does not work.
<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var scene = document.querySelector("a-scene");
var vid = document.getElementById("video");
var videoShere = document.getElementById("videoShere");
if (scene.hasLoaded) {
run();
} else {
scene.addEventListener("loaded", run);
}
function run () {
if(AFRAME.utils.device.isMobile()) {
document.querySelector('#splash').style.display = 'flex';
document.querySelector('#splash').addEventListener('click', function () {
playVideo();
this.style.display = 'none';
})
} else {
playVideo();
}
}
function playVideo () {
vid.play();
videoShere.components.material.material.map.image.play();
}
})
</script>
</head>
<body>
<div id="splash" style="display:none;">
<div id="start-button">Start</div>
</div>
<a-scene>
<a-assets>
<video id="video" src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/" webkit-playsinline></video>
</a-assets>
<a-entity camera="userHeight: 1.6" look-controls cursor="rayOrigin: mouse"></a-entity>
<a-videosphere id="videoShere" loop="true" src="#video" rotation="0 -90 0"></a-videosphere>
</a-scene>
</body>
</html>
This is my code. What is the issue with my code? And why it does not work on android browser? Any way to solve this?
As per the A-Frame docs (https://aframe.io/docs/0.8.0/primitives/a-videosphere.html#caveats), you should have the following lines in your code to ensure they function properly in as many devices as possible:
<head>
...
<meta name="apple-mobile-web-app-capable" content="yes">
...
</head>
In the <video> element, itself, you will want to use this code to ensure that the video will play inline and will start playing immediately, if supported by the browser:
<video id="video" src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/" autoplay loop playsinline webkit-playsinline crossorigin="anonymous"></video>
Note that crossorigin="anonymous" should be set when using assets hosted on other domains. It's also worth noting that some domains won't let you do this even if you use this code.
User interaction within the browser (outside of A-Frame) may be required to trigger the video for browsers that do not allow autoplaying by default. I modified your modal slightly to make it more visible:
<div id="splash" style="display: flex; height: 100%; width: 100%; z-index: 999999; position: absolute; background: rgba(0, 0, 0, 0.8);">
<div id="start-button">Start</div>
</div>
The javascript can be simplified just by placing the following code immediately before the ending </body> tag:
<script>
// User interaction modal to trigger video in some browsers/devices.
var modal = document.querySelector('#splash');
var video = document.querySelector('#video');
modal.addEventListener('click', function(e) {
video.play();
this.parentNode.removeChild(this);
});
</script>
Now, when a user clicks the modal splash screen, the event listener will capture the event, play the video, and remove the splash screen entirely from the DOM.
Here is a working demo: https://ultra-bass.glitch.me/
You just may need to add logic for detecting mobile devices, or more specifically, the devices that require this workaround.
i am programming a website with Bootstrap and the family/forest one page template (on themeforest.net), i customized the portfolio section of this template to have a video popup when we click on the thumbnail (instead of a full image popup originally).
The popup works perfectly with the 'mfp-iframe' class and the 'video/video_name.mp4' href, so here the code:
I don't wanna use a mp4 video but a vimeo video and it s not working when i replace the href 'video/video_name.mp4' by a vimeo link 'https://vimeo.com/118901221' or a embed vimeo link 'https://player.vimeo.com/video/118901221'
Please somebody can help to resolve that issue.
You just need the following codes below and try to analyze my problem about Vimeo last time MAGNIFIC-POPUP: Embed videos from Vimeo on my site using magnefic popup. If ever you encounter my problem in Vimeo.
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Magnific Popup CSS-->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
</head>
<body>
<a class="vimeo-video-1" href="#">CLICK ME TO POP-UP 1 VIDEP</a><br>
<a class="vimeo-video-more" href="#">CLICK ME TO POP-UP MORE VIDEO</a>
<!--Jquery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Magnific Popup JS -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
</body>
</html>
<script type="text/javascript">
$('.vimeo-video-1').magnificPopup({
items: [
{
src: 'https://player.vimeo.com/video/118901221',
type: 'iframe' // this overrides default type
}],
gallery: {
enabled: false
},
type: 'image'
});
//MORE VIMEO VIDEO
$('.vimeo-video-more').magnificPopup({
items: [
{
src: 'https://player.vimeo.com/video/118901221',
type: 'iframe' // this overrides default type
},
{
src: 'https://player.vimeo.com/video/211690338',
type: 'iframe' // this overrides default type
},],
gallery: {
enabled: true
},
type: 'image'
});
</script>
You need to supply the direct link to the video. In the case of vimeo, this is only available if you've paid for a premium account. A solution would be to re-upload the video to YouTube and then get the direct link by doing this:
Copy the full URL to the video on YouTube.
Install VLC Media Player and open it.
Hit Media (menu)... and Open Network Stream.
Paste your video URL there and hit Play.
Hit Tools (menu)... Media Information. You'll find the direct URL to the video there. Use this in your website.
If you want to actually embed from YT or vimeo, check this out:
$(document).ready(function() {
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>
From the documentation.
And this question.
I'm wanting to create a "Latest Video" block on my website, but I only need the YouTube thumbnail image and MAYBE the title of the video. I found a method for doing an embed for the latest video itself, but I'm uncertain if I can modify it for just the thumbnail.
<!DOCTYPE html>
<html>
<head>
<title>YouTube Recent Upload Thing</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="static_video"></div>
<script type="text/javascript">
function showVideo(response) {
if(response.data && response.data.items) {
var items = response.data.items;
if(items.length>0) {
var item = items[0];
var videoid = "http://www.youtube.com/embed/"+item.id;
console.log("Latest ID: '"+videoid+"'");
var video = "<iframe width='420' height='315' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>";
$('#static_video').html(video);
}
}
}
</script>
<script type="text/javascript" src="https://gdata.youtube.com/feeds/api/users/urusernamehere/uploads?max-results=1&orderby=published&v=2&alt=jsonc&callback=showVideo"></script>
</body>
</html>
Can this be repurposed for my idea? And how can I do it if it can't? I have basic HTML and CSS knowledge, with a very limited understanding of javascript and php. If I can just get something that will swap the thumbnail and ideally display the title, I can handle styling and implementation. Also interested in the same for specific playlists' most recent addition, but that doesn't have to happen.
Not sure if this is what you mean but you can try something like:
<div onclick="this.style.display='none'; this.nextSibling.style.display='block';"><img src="image.png" style="cursor:pointer" /></div><div style="display:none">
<!-- Embed code here -->
</div>
When SoundCloud HTML5 Player Widget is loaded with autoplay option, play event not firing when track starts.
However there is a timeout between loading the widget (or loading other URL into the widget) and when the track starts, so it's nice widget to call the event.
Is this by design or is it issue to be solved?
The HTML5 Player widget should fire a SC.Widget.Events.PLAY event when the auto_play option is used. Here's a code snippet I used to verify:
HTML:
<!doctype html>
<html>
<head>
<title>Widget Demo</title>
<style type="text/css">
iframe {
display:block;
border:0;
margin-bottom: 20px;
height: 365px;
}
</style>
</head>
<body>
<iframe id="widget" width="100%"></iframe>
</body>
<script src="http://w.soundcloud.com/player/api.js"></script>
<script src="script.js"></script>
</html>
JavaScript (the contents of script.js):
(function() {
var iframe = document.querySelector('#widget');
iframe.src = 'http://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/43315398&auto_play=true';
var widget = SC.Widget(iframe);
widget.bind(SC.Widget.Events.PLAY, function(eventData) {
alert('Playing...');
});
}());
You can check out a working example here on jsfiddle.