I've been attempting to find a method for playing video inline in mobile safari for awhile now.
I know this is possible and has been achieved (see link)-
http://www.raptmedia.com/project/philips-designed-play-drives-mobile-video-engagement
However, I am unable to determine how this is done. I've tried manipulating iframes but this alone doesn't seem to have any impact.
I've included a js player for cross browser compatibility and used it within an iframe, no luck in mobile:
<div class="vid"> <video id="vid01" class="video-js vjs-default-skin" controls="controls" preload="none" width="600px" height="600px">
<source src="video.mp4" type='video/mp4'/> <source src="video.webm" type='video/webm'/>
<source src="video.ogg" type='video/ogg'/> <track kind="captions" srclang="en" label="English" />
</video> <script> var myPlayer = _V_("vid01"); ` </script>` </div>
I know this is an old question, but it ranks high in my Google search and I can at least answer the question posed above, so I'll add this in case other people come across it: why does it work on that particular page?
I looked at it, and it doesn't really play inline video. On my iPhone, it preloads a ton of JPG frames and then "plays" them like a movie, while playing an mp3 audio track behind it. So they are just faking it, basically. Still not able to play the video inline on the phone.
The only solution I know is based on the drawImage function of the canvas tag... I spotted the basics here on SO but there's some fun left for the reader :D, in a few words, You hide and play the video and at the right freq You render the current frame into a canvas, some attention is needed for the audio sync. It works better than expected.
Here is a basic sample, and here another one where I try to apply some webkit based filters.
Hope it helps, have fun!
You can use something like this library to make it work: https://github.com/bfred-it/iphone-inline-video
It basically uses an audio tag to drive the video by seeking to the current time, so you can have the frames updated without having to play the video.
The good news is that iOS 10 will support this, so no more hacks are going to be needed: https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html#//apple_ref/doc/uid/TP40014305-CH11-DontLinkElementID_12
Related
I'm trying to have a short sound that I can play over multiple times by simply the play button on AMP. On Safari (desktop and mobile) the sound will only play once.
The sound is supposed to be triggered when the user clicks a button.
I've followed the amp documentation for the amp-audio and the audio events
<amp-audio preload="none" id="audio" controlslist="nodownload" hidden>
<div fallback><p>Your browser doesn't support HTML5 audio</p></div>
<source type="audio/mpeg" src="/media/shortSound.mp3">
<source type="audio/ogg" src="/media/shortSound.ogg">
</amp-audio>
The "native" audio button is hidden and is triggered by clicking the following button (with the on:tap event)
<div class="button" on="tap: audio.play" role="button" tabindex="0"></div>
I have also tried using absolute URLs in vain and using the pause function before play but to no avail.
Note: Unfortunately there is no .load event to circumvent the problem like with HTML5 on Safari (which is how I got to play it on Safari on the non-amp version)
Actual result: The sounds play once (the first time I click it). The rest of the time nothing happens, no message in the console either. What am I doing wrong?
I have found the issue was with the mp3 encoding of my files. It uses VBR instead of CBR, the problem doesn't happen when using CBR encoded mp3 files. To check your encoding I recommend using https://checkmate.gissen.nl/download.php
EDIT: IT was actually because Safari uses HTTPRange to get its resources instead of a classic get method.
Hopefully the loop attribute on <amp-audio> can help here: https://amp.dev/documentation/components/amp-audio/?format=websites
I am trying to use videogular2 and I have simply replaced the static video content link with a shareable link from Google drive that points to an MP4 video file.
<vg-player>
<video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
<source src="https://drive.google.com/open?id=xyz" type="video/mp4">
</video>
</vg-player>
Under Chrome browser the video player shows a resistance icon at the center and cannot play anything as it can be seen at the following screenshot:
Under Internet Explorer the video player shows the text "Invalid source" and the play button on the left as it can be seen on the next image:
But if I use the sample URL: http://static.videogular.com/assets/videos/videogular.mp4
it works very well.
I would appreciate any ideas/pointers related to what I am doing wrong.
I had the same problem and solve it using an address like the following:
https://drive.google.com/uc?id=ID_OF_YOUR_VIDEO&export=download&authuser=0
thank you for reminding me this. I found the answer long time a go but I haven't updated SO. I will accept your answer of course.
In order to view a Google video from my application (not necessarily using the Videogular plugin) I used an iframe:
<iframe src="https://drive.google.com/file/d/ *** VIDEO ID *** /preview?pli=1" frameborder="0" target="_parent">
</iframe>
If you want to start the video from a specific time and not from start add this parameter at the video url:
&t=10
where 10 is the start time in seconds. In this case the video will start playing from the 10th second.
I've been trying for days to get a specific behaviour on the homepage of my personal website. But I didn't find any good solution yet. Can someone help me please :-)
I have a homepage with a grid of short videos with different durations. I want each of them to play completely on mouse hover. On second hover most should replay normally, but some should play backward.
I read that playing videos backward was not good in terms of performance because native browser players were not meant for that. So I searched for an alternative and came to the following idea:
Double the duration of those "special" videos so they integrate their forward sequence (1-2-3) and backward sequence (3-2-1) in the same file. On first hover, the video would play its first half, and after that only, on second hover it would play the second half.
Here is a JSfiddle where I put all elements for testing… but I'm currently stuck with my poor JS skills.
HTML:
<video class="forward-backward">
<source src="http://tacco.fr/divers/forward-backward.mp4" type="video/mp4">
<source src="http://tacco.fr/divers/forward-backward.webm" type="video/webm">
</video>
jQuery:
var figure = $("video").mouseover(hoverVideo);
function hoverVideo() {
$(this).get(0).play();
};
It may be a very bad idea in terms of performance (because filesizes are bigger to load), so I'm really open for any others.
Don't hesitate to ask if you have any question.
Thank you very much :-)
BTW: no more than 5 videos should play at the same time… I don't know how to do that…
I ran into this problem. The best solution I can think of is to use a video editor and reverse the video files themselves. Then you create two video elements, one with the forward video as the source and one with the reverse video as the source. Using javascript, you can then show the correct video (and hide the other one) depending on whether you want the video to be playing forward or backwards. Does that help?
I'm trying to get an HTML5 video element to autoplay on a Samsung Smart TV (in the regular browser, not specifically as a TV app, if that makes any difference). Perhaps the autoplay element just doesn't work - I have tried all of the following.
autoplay="true"
autoplay="autoplay"
autoplay=autoplay
The video element will play fine manually (once you have managed to point the cursor on the incredibly tiny play control!)
Has anyone else got this to work?
This should work:
<video id="video" src="movie.mp4" autoplay="autoplay" width="320" height="240">
Your browser does not support the video tag.
</video>
At least the documentation says that:
http://www.samsungdforum.com/upload_files/files/guide/data/html/html_2/reference/HTML%20Specification.html#HTML5%20and%20Samsung%20Smart%20TV%20SDK
If the autoplay attribute won't work, still you can start it using JavaScript. Just try to call the play() method:
var myVideo = document.getElementById("video");
myVideo.load();
myVideo.play();
Trying to get good html5 video on my site. here are the issues and observation, observed locally:
IN Firefox
1. when you pass the mouse over the video, video stutters, audio continues
2. the first video plays the best but not as well as in chrome
3. The 2 other videos don't play well, audio runs but video stutter/stops
In Chrome
1. Poster image visible on video 1, not visible on videos 2 and 3 - u just see the controls
2. video plays well, when you pass the mouse over the video, no stutter...pause and play works well
on all 3 videos...
Perhaps the ogg format is not as smooth as mp4 ? Also, I'm not clear on changes in code required when running more than 1 video on a page. I did add an id, but there is no corresponding css so I'm just not clear on that...
Here is the code I am using:
<video id="vid2" video controls= "controls" preload="metadata" width="640" height="360" poster="video-blog/clarkekoiblog-greenhouse.jpg" tabindex="0">
<source src="video-blog/clarkekoiblog-greenhouse.mp4" type="video/mp4"><!--for chrome,safari-->
<source src="video-blog/clarkekoiblog-greenhouse.ogv" type="video/ogg"><!--for firefox-->
<source src="video-blog/clarkekoiblog-greenhouse.webmvp8.webm" type="video/webm">
<p><em> If you do not see a video here, please refer to the info at the bottom of the page</em></p>
</video>
Looking for comments, a solution whatever to make this work.
THANK YOU