Is there a way to turn on autoplay for an embeded theta360 image?
I can see the autoplay feature is turned on https://theta360.com/en/gallery/ but not when embedding the image somewhere:
<blockquote data-width="500" data-height="375" class="ricoh-theta-spherical-image">Spherical Image - RICOH THETA</blockquote>
<script async src="https://theta360.com/widgets.js" charset="utf-8"></script>
Also on mobile, if I long tap for a second, I see that autoplay starts, but can't see how to automatically turn it on when it loads.
I've noticed that how you upload from the Theta app determines whether it auto rotates or not when embedding:
"Share without specifying the orientation" = auto rotation
"Share with the current orientation" = fixed to chosen direction always
There is no variable to set it to rotate or not (that I've found).
Related
We are using tag for acting as an animated GIF replacement on our website(ucraft.com).
On the top screen of the page there is a background image, on which we have text and a call to action button.
After that there is another block of content, where we have a video on the left and text on the right...
After that block there are 2 other blocks with the same scenario: tag and text.
On mobile(iOS and Chrome) the browser is waiting for the videos to autoplay, after which ONLY it shows the background image in the first(top) screen.
Thus Lighthouse is giving an issue that the rendering is not really well organized.
From the other hand, the UX on the website is bad, because the users don't really understand what to do, as the image is not being loaded(which is important) until the ALL videos of the page is loaded.
Due to this, Google's pagespeed gives us a grade of 30 for mobile, but 90 for desktop.
Please see the pagespeed result here: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.ucraft.com
Or you may also open the homepage on your device and see...
Here is the code we are using for the video:
<video class="lazy" width="100%" height="100%" webkit-playsinline="true" autoplay muted playsinline="true" data-status="loaded" loop>
<source data-src="https://storage.googleapis.com/ucraft.com/videos/domain-homepage.mp4">
<source data-src="https://storage.googleapis.com/ucraft.com/videos/domain-homepage.webm">
</video>
And this code, that we are putting into the to lazyload the video:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
lazyVideos.forEach(function(video){
for (var source in video.children) {
var videoSource = video.children[source];
if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
videoSource.src = videoSource.dataset.src;
}
}
video.load();
video.classList.remove("lazy");
});
});
</script>
Are we missing anything to tell browser to load everything, including the tag and to show the poster, before the video is ready to play?
Firstly, you should be using a background color, a background image, and then your video, in that order. Users shouldn't have to wait for an image nor a video to be able to see some text.
Next, stop lazy-loading your video! The browser already does a pretty good job of deferring video loads. It's not your responsibility to change that.
Finally, there is no poster on your video. Not sure if you intended to use one there or not, but since you mentioned it in your question, I thought I'd point it out.
I have a page that displays multiple videos using html video tags. The code looks like the below snippet:
<video controls="controls" class="vw" name="Video" src="videos/ACS_Video_2b.mp4"></video>
The class is simply a class that dynamically sets the width, height, etc.
The video looks and plays very nicely in all browsers except for Firefox. All of the videos on the website using these tags are upside down in Firefox. I can't seem to find anything online about people having similar problems. In fact, when I go to other websites using identical video tags and video extensions, etc., the video displays perfectly on their site for me in Firefox.
Here is the website with the upside down videos for reference:
http://www.larrykrannich.com/video.html
The videos display upside down locally, on a local server, and hosted on a real server.
Any help would be greatly appreciated.
This is a firefox problem, I have seen that several people have complained over and over about this problem but all to no avail. it only happens when the video is recorded from mobile, firefox doesn't seem to use the camera details to encoded rotation that came along with the mobile video. for the main time you have to figure out a fix for yourself, you can use css transform to rotate the video tag, but one problem with that is that it will rotate the video control with it.
you can use videojs, then add the rotate plugin, you can just google it. it will help rotate for video.
you can do something like this
if ( isfirefox ) {
<video class="video-js vjs-default-skin" controls preload="auto" width="270" height="360" data-setup='{ "plugins": { "zoomoomrotate": { "rotate": "270", "zoom": "1.4" } } }'>
<source src="video-source" type="video/mp4">
</video>
}
also, there is a recent issue in chrome update that compress mobile video as well. still looking for a fix for it
It seems to have something to do with rotation metadata in the video files. The problem can be solved by transcoding and rotating the video. Similar post here
Most likely, you have recorded the video upside down, without realizing it - which can happen, e.g. when using a smartphone-camera.
There are video-players, that auto-correct for such things, which might be, why you didn't realize the video being upside-down.
There is a free Videoplayer called VLC, which you can correct this with by rotating the video.
Get it here and install it, if you don't already have it:
http://www.videolan.org/vlc/
Steps:
Open video in VLC media player
Pause the video, if it's too short to keep running, while you perform the other steps
In the upper menu, navigate as follows:
Tools
Video Effects
In the window, that just opened go to the Geometry-tab and do the following:
Check the box "Transform"
Select "Rotate by 180 degrees"
Your video should now look nice and right side up
To save your changes:
In the upper menu click, navigate as follows:
Media
Convert/Save
Choose, where you want to save the file.
Upload the rotated video in place of the upside-down one.
Now your video should be displayed correctly :)
I have developed a little system/series of videos (3 to be exact) in an iFrame. When the main index page is loaded, and after the user clicks the "play" button on the video (which is in that iFrame), that video plays, then it redirects to another video (in another .html file) that autoplays, and then when that is over, it redirects to another video that autoplays--then everything's done. Clunky, I know, but that's what needs to be done.
Here's my issue: I want the user to be able to fullscreen the first video (if they so desire) and retain that fullscreen "status" throughout the transition between videos.
For webkit browsers, fullscreen "mode" for the videos in that iFrame works. I'm using this snippet of code in my iFrame to do so:
allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
So fullscreen mode does work, it just won't retain that fullscreen status when the video switches to the next. That makes sense.
I'm looking for way to detect that the user is viewing the video fullscreen and then automatically set the next video in the series to fullscreen when it is loaded.
Below is what the markup for each "video page" (that goes in the iFrame) looks like. The only difference between on video2.html and video3.html is that they have autostart:true below the width attribute.
<html>
<head>
<script src="http://jwpsrv.com/library/5Tx9ZN23EeKCNxIxOQulpA.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="videobox">
<div id="container">This'll be the player</div>
<script type="text/javascript">
jwplayer("container").setup({
file:"video/open-title-final.mp4",
height:480,
width:640,
events:{
onComplete: function() {
window.location = "video2.html";
}
},
});
</script>
</div><!-- /videobox -->
</body>
</html>
So again, I'm looking for a way to detect that a user has activated fullscreen mode, so that the next video in the series can be automatically set to activate fullscreen mode at the start. Is this possible?
Thanks in advance.
Not sure why you can't just use a playlist to queue the video's up, but i'll just trust that you have your reason for this exact implementation method and just tel you that i believe you will find there is an ònfullscreen`callback in JWPlayer, along with other fullscreen related checking methods for you to use.
See here: http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference/ and look under the resize heading around halfway down the page (or just search for onfullscreen on that page)
When the audio completes in the HTML5 version of the SoundCloud widget, the share panel appears and covers the audio waveform. The user can replay the audio; however, the share panel doesn't disappear, nor does there seem to be any way for the user to hide it. Nor is there any way to prevent the panel from appearing in the first place, which is the ideal option.
The "sharing" parameter is set to false in my embed code.
Here is the embed code I'm using:
<iframe width="100%" height="100%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F87283114&buying=false&sharing=false&liking=false&show_artwork=false&download=false&show_user=false&show_bpm=false&show_playcount=false&show_comments=false&color=568ED4&theme_color=DDD9C3"></iframe>
Replicated in Firefox and Chrome.
Again, this is an HTML5 issue only. The Flash version works properly.
Note that a similar issue also occurred but was fixed in the Flash version:
New SoundCloud HTML5 widget animation on track finish
As it takes time for the video player to load the mp4 video, does HTML5 support playing a "loading" logo when loading the video ?
Since my asp.net apps is a mobile page, it needs the user to click on the video to play the video (android, iphone not support autoplay). So, I cannot make a "loading" logo as poster, otherwise, the user will be confused about it. I want to display a loading logo when user click play button on iPad.
thanks
Joe
It took me a way too long to actually figure out how to do this, but I'm going to share it here because I FINALLY found a way! Which is ridiculous when you think about it, because loading is something that all videos have to do. You'd think they would have taken this into account when creating the html5 video standard.
My original theory that I thought should have worked (but wouldn't) was this
Add loading bg image to video when loading via js and css
Remove when ready to play
Simple, right? The problem was that I couldn't get the background image to show when the source elements were set, or the video.src attribute was set. The final stroke of genius/luck was to find out (through experimentation) that the background-image will not disappear if the poster is set to something. I'm using a fake poster image, but I imagine it would work as well with a transparent 1x1 image (but why worry about having another image). So this makes this probably a kind of hack, but it works and I don't have to add extra markup to my code, which means it will work across all my projects using html5 video.
HTML
<video controls="" poster="data:image/gif,AAAA">
<source src="yourvid.mp4"
</video>
CSS (loading class applied to video with JS)
video.loading {
background: black url(/images/loader.gif) center center no-repeat;
}
JS
$('#video_id').on('loadstart', function (event) {
$(this).addClass('loading');
});
$('#video_id').on('canplay', function (event) {
$(this).removeClass('loading');
$(this).attr('poster', '');
});
This works perfectly for me but only tested in chrome and safari on mac. Let me know if anyone finds bugs and or improvements!
Also a simple solution to add a preloader image while loading the video:
HTML:
<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png">
the poster is a transparent image 1px.
CSS:
video {
background-image: url(images/preload_30x30.gif);
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: center;
}
Use the tag id poster
<video controls="controls" poster="/IMG_LOCATION/IMAGENAME">
More info can be found http://www.w3schools.com/html5/att_video_poster.asp
You could probably do it with JavaScript by creating an image overlay with an animated "loading" gif which you only display when the video is loading and is not ready to play.
You'd have to write JavaScript to link up with the Media API for detecting when the video is ready to play and so forth though (so you could hide the image again), but it should be possible.
My solution was to add the following inside of the window.fbAsyncInit = function():
var finished_rendering = function() {
var el = document.querySelector('div#loading_msg');
el.style.display="none";
}
FB.Event.subscribe('xfbml.render', finished_rendering);
Found: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12
Personally I think the most elegant way to do this is by using some code like this,
<video src="myVideo.fileExtension" onplaying="hideControls(this)" onwaiting="showControls(this)" preload="auto" poster="myAnimatedWebpOrGifThatSaysVideoIsNotYetReady.fileExtension">No video support?</video>
<script type="text/javascript">
//We hide the video control buttons and the playhead when the video is playing (and enjoyed by the viewer)
function hideControls(event){ event.controls=false; }
//If the video has to pause and wait for data from the server we let controls be seen if the user hovers or taps on the video. As a bonus this also makes the built-in loading animation of the browser appear e.g. the rotating circular shape and we give it a little delay (like 1 sec) because we don't want the controls to blink and the delayed show-up actually looks nicer.
function showControls(event){ setTimeout(function(){ event.controls=true; },1000); }
</script>
To make it even better you could use ontimeupdate instead of onplaying which would fire continuously.
As for the delay time actually not 1 but 4 seconds -to me- is the best.