Display Video Inline - javascript

I have video embedded in a webpage.
I would like to let it play inline on the iOS and not expanding to full screen when clicking on the play button.
I've tried
adding webkit-playsinline
<video width="400" controls webkit-playsinline>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I've tried added in JSFiddle <-- Please View it use your Phone/Tablet
Any hints ?

You have to set the following in Obj C as well.
webview.allowsInlineMediaPlayback = YES;
Your existing attribute is right like below.
<video id="player" width="480" height="320" webkit-playsinline>
Other - Use HTML5 FullScreen API
http://www.sitepoint.com/use-html5-full-screen-api/
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
Below are the Webkit Fullscreen properties to play around.
document.webkitCurrentFullScreenElement
document.webkitCancelFullScreen
document.webkitFullScreenKeyboardInputAllowed
document.webkitIsFullScreen

Related

html autoplay not working properly in chrome

while I am trying to autoplay a song in chrome but it is not working. I tried using JavaScript still getting the same error.
function myFunction() {
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
myFunction();
<audio id="myAudio" controls autoplay>
<source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<div id="demo"></div>
In most browsers you can only use autoplay with the muted attribute
See: https://www.w3schools.com/tags/att_audio_autoplay.asp
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
So something like this should work:
<audio id="myAudio" controls autoplay muted>
<source src="horse.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
It is not allowed to autoplay sounds. So it has to be muted. Also with video you have to mute it, otherwise the video is not played. So it will be with audio also. Maybe you have to add a button that says that they have to click it to hear the sound?

Hide time-second scrollbar in video tag?

How I can hide time-second scrollbar in video tag using HTML or javaScript:
Setting controls="false" as suggested by #Praveen removes all controls. I want to remove the time-second scrollbar.
Here is my code:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
It can be done through css. Add following line in css:
video::-webkit-media-controls-timeline {display: none;}
video::-webkit-media-controls-current-time-display {
display: none
}
find more details here.
Unfortunately you cannot remove progress bar from the video because it is rendered by browser.
The only way is you use some video player like Brightcove or JWPlayer for example.

Play html video when its in viewport, pause on leave viewport

I'm trying to play my video as soon as it's in the viewport and when it's not in the viewport anymore it's supposed to pause.
I've tried this so far:
HTML code:
<video id="video" width="320" height="240" controls>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
Your browser does not support the video tag.
</video><br>
<video width="320" height="240" controls>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
jQuery code:
$("#video:in-viewport").play();
$(window).scroll(function(){
$("#video:in-viewport").play();
});
I'm using this plugin for the in-viewport check
http://www.appelsiini.net/projects/viewport
This is my jsfiddle:
http://jsfiddle.net/hytpm3xe/2/
Does anyone have an idea how to get this working correctly?
Thanks!
Two issues:
1) You want to refer to the tag, not the id, so no "#"…
$("video:in-viewport")
2) To use the video API, you have to use the DOM object, not jQuery object, so the final call would look something like…
$("video:in-viewport")[0].play();

Flash fallback not working in case HTML video is not supported

I am using HTML video with flash fallback on my site but the flash doesnt seem to work in case HTML video is not supported. Do I need to include any javascript file to make this work ?
<video width="800" height="400" preload=""
onloadeddata="document.getElementById('videoLoadImg').style.display = 'none';"
poster="/admin/config/header_files/top.jpg" autoplay="">
<source src="/admin/config/header_files/top.mp4" type='video/mp4;' />
<source src="/admin/config/header_files/top.webm" type='video/webm;
codecs="vp8, vorbis"' />
<source src="/admin/config/header_files/top.ogv" type='video/ogg;
codecs="theora, vorbis"' />
<embed src='/admin/config/header_files/top.swf'
type='application/x-shockwave-flash' width='800' height='400'
allowscriptaccess='always' allowfullscreen='false'></embed>
<img src='/admin/config/header_files/cake.jpg' />
</video>
The HTML video is not working on my iMac with Safari 5.0.6.
Could it be the video is not auto played? because when I open WebKit Inspector and try
document.querySelector('video').play()
and it works. This case you could the code above to jQuery DOMReady, or add the autoplay attribute like this:
<video autobuffer autoplay>
FYI: I have Safari 5.1.2, however I believe Safari has support for HTML5 video around 4.0.

Making a video to play as my websites favicon

This plugin can make a video to play as your site's favicon by using this code:
var favicon=new Favico();
var video=document.getElementById('videoId');
favicon.video(video);
//stop
favicon.video('stop');
here's the Github page.
I tried to make the video play automatically without any input but
unfortunately I couldn't get it to work with my site.
P.s: I'm just a beginner so if anybody have any suggestions or maybe a fiddle to work it out that'll be great!
Did you try using the video.play() feature? See: http://www.w3schools.com/tags/av_met_play.asp
Since I don't have your video to test out, perhaps you could try this?
favicon.video(video.play());
Or adding the "autoplay" keyword to the video tag. See: http://www.w3schools.com/tags/att_video_autoplay.asp
<video id="videoId" controls autoplay>...</video>
Then add an onended event for the video, so that it stops after the video finishes playing. Otherwise, it may try to stop right after the favicon.video(video); function, thus giving the illusion that it's not starting to play at all. It's probably starting & then a few milliseconds later, stopping.
video.onended = function() {
favicon.video('stop');
};
(Mobile Note: From experience with building video players, I've discovered that auto-play won't work on all mobile devices. Apple blocks it due to prevent websites from automatically consuming a user's monthly alloted bandwidth. So mobile users have to press the video play button, to start videos on iPhones & iPads.)
You need to add a <video> to your html
here's a sample code
<video id="videoId" width="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Video tag not supported. Download the video here.
</video>
EDIT
The secret to getting this working is having the video on the same domain and not loading it from other domain.
Also, you need to add a shortcut icon in the title beforehand
so in your title you need to add this
<link rel="shortcut icon" type="image/png" href="icon.png">
having it in png is the key Here's an example. Have a look https://j99.in/favicon
This may be helpful to you
HTML autoplay Attribute
<video controls autoplay>
sample script
<script>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
function pauseVid() {
vid.pause();
}
</script>
sample html:
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
For reference:click me

Categories