I tried getting a video to display fullscreen on iPad using HTML5, but the result I get is:
First time click video is play
Second time click fullscreen video is play it will appear.
I can't get both the video to play and turn fullscreen when activated.
Here's the source I've been using:
$(document).ready(function() {
$("#te").bind('click', function() {
$('#myVideoTag')[0].play();
$('#myVideoTag')[0].webkitEnterFullScreen();
});
});
I was running into the same issue, and setTimeout seems to be the best solution I've run into.
This is what is working for me:
note: the videoEnable function is called through an onclick attribute in the "a" tag
//define function
var videoEnable = function(videoCount) {
//Play video
$('video').get(videoCount).play();
//Timeout before fullscreen registers
setTimeout(function(){
$('video').get(videoCount).webkitEnterFullscreen();
}, 2000);
}
Is that what you are looking for?
Related
JW player, if you hide the control bar you can click the video to play and pause, this works fine in desktop.
When I tested this in ipad it plays but touching it again doesn't pause the video.
Verify with this URL, https://support.jwplayer.com/customer/portal/articles/1406723-basic-video-embed
**Dont use the control bar as I need it disabled.
If you hide the JW controls, then the player should also not react to clicking on the video as a means to start/stop unless you specifically add code to tell it to.
For this to happen you need to attach a function to the onDisplayClick event listener as follows:
**JW6 version**
jwplayer().onDisplayClick(function(){
jwplayer().play();
});
**JW7 version**
jwplayer().on('displayClick',function(){
jwplayer().play();
});
Just calling the play() method in this way will handle the toggle of play/pause states - you don't need to manage this yourself.
I tried to do it in proper way but that doesn't seem to work alright, this is the only solution works for me,
$('.video-wrapper').on({ 'touchend' :
function(){
if(dtjwplayer.getState() !== 'paused') {
dtjwplayer.pause(true);
}
}
});
This is a very basic requirement where people wants to disable the control bar, Please let me know if there is any better way to do it.
How can I detect when a video on iOS is closed? I am running videojs which launches HTML5 videos as native video players. In order to react properly, I want to get an event when the native player is closed.
There are several similar questions to this one around here, but non of the answers work.
First solution I tried:
player.addEventListener('webkitendfullscreen', onVideoEndsFullScreen, false);
Solution was proposed in 2012 here: How to figure out when a HTML5 video player enters the full screen mode on iOS / iPads?
This method doesn't work for me. The event doesn't get fired (at least in iOS simulator) and I can't do anything with it.
Second solution I tried
// Do on resize
if(video.webkitDisplayingFullscreen == false){
// Exit was triggered
}
Solution was proposed even earlier than 2012 here: Is there an "onClose" event for the fullscreen video player on iPhone?
This method also doesn't work, the video element does not have this attribute (at least in iOS simulator). BTW, this method is deprecated.
Does anyone have an idea about how to get notified about iOS leaving fullscreen nowadays?
You may well have found your solution by now, but I was having the same issue on iPad and iPhone. I found that none of the fullscreenchange events were firing on these devices, though it worked fine elsewhere.
I found my solution at http://html5wood.com/html5-video-fullscreen-change-events-on-ipad/, but I'll explain here for completeness too:
In addition to the various other event listeners for fullscreenchange, I added
var video = document.getElementById(myVideo);
video.addEventListener("webkitendfullscreen", function(){
videoExitedFullscreen(video);
}, false);
(Note that the event listener is called on the video itself, not on the document like the other event listeners could be)
Within that, I'm calling another function that tests if the video is currently fullscreen or not, and makes changes accordingly - I created this as a function so I could easily call it from within each of the multiple event listeners needed for various browsers
(if you're not sure what these are see https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#Prefixing)
//function to be run when full screen is closed
function videoExitedFullscreen(videoElement){
//check if an element is currently full screen
if(document.fullScreenElement || document.webkitIsFullScreen == true || document.mozFullScreen || document.msFullscreenElement ){
//do whatever here if the video is now (just became) full screen
} else {
console.log('fullscreen was closed');
//do whatever you want on fullscreen close, like pause or mute
}
}
Listen for the fulscreenchange event and check isFullscreen().
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
</video>
<script>
videojs('my_video_1').ready(function(){
var player = this;
player.on('fullscreenchange', function(){
if(!player.isFullscreen()) {
alert('Exited fullscreen');
}
});
});
</script>
i try to play a DM video on a page on clicking a custom button. It works perfectly on desktop browsers but not on ios devices.
Here is how i proceed using js sdk and jquery.
function _on_apiready(){
$custom_button.one("click", _playVideo)
}
function _playVideo(e){
player.play();
$custom_button.click(function(){player.togglePlay();})
}
var player = DM.player(dom_el,
{
video:dm_id,
params:{html:1, autoplay:0, info:0, logo:0, related:0},
events:{
apiready: _on_apiready,
timeupdate: _on_progress,
playing: _on_playing,
pause: _on_pause
}
}
);
On ios devices, the video seems to load but doesn't play. I need to press the play button of the player to start the video and then may use my custom button to togglePlay.
Doing something wrong ?
Thx
this question has been answered here already: Dailymotion embedded player on iOS devices (HTML5)
Basically, mobile devices prevent videos from being played automatically, this is why it's not playing with your code. As you say, those devices require an user interaction to first play the video.
I am developing a site targetted to webkit(android and iphone) . Since webkit supports Html 5 video tag so i decided to use this tag to play videos.
Due to design issues, I can't show the video place holder on the page. Design demands a play button on the page which is when clicked will start playing video in full screen mode.
So I decided to set the width and height of video element to zero to hide the control and use javascript to play the video. Here is my code
Play Video
<video id="myVideo" src=""></video>
<script type="text/javascript">
function playVideo()
{
var video = document.getElementById("myVideo");
try {
if (video)
video.play();
else
alert("video control not found");
} catch (error) { alert(error); }
}
</script>
.So far so good and it works perfect in android and iphone/ipod prior to IOS 4+
In Iphone 4. Clicking on the link does execute the playVideo function but does not play the video and provide no error.
Can anybody tells me w
I wonder if it is possible to make an action with youtube api when embeded video finishes. For example, in my web i start video on hover of one element, but i want video tu be replaced by static image when it finishes. How can i do that?
I had wordpress and used in suchh steps:
installed http://www.tikku.com/jquery-youtube-tubeplayer-plugin
then add this code into page
but change
1) yoursite.com to yours
2) alert("Hello"); to your another desired function;
3) DkoeNLuMbcI to desired video id;
<div id="youtube-player-container" style="float:right"> </div>
<script type="text/javascript" src="http://yoursite.com/folder/jQuery.tubeplayer.min.js"></script>
<script type="text/javascript">
jQuery("#youtube-player-container").tubeplayer({
width: 422, // the width of the player
height: 285, // the height of the player
allowFullScreen: "true", // true by default, allow user to go full screen
initialVideo: "DkoeNLuMbcI?autoplay=1", // the video that is loaded into the player
preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
onPlay: function(id){}, // after the play method is called
onPause: function(){}, // after the pause method is called
onStop: function(){}, // after the player is stopped
onSeek: function(time){}, // after the video has been seeked to a defined point
onMute: function(){}, // after the player is muted
onPlayerEnded: function(){ alert("Hello"); },
onUnMute: function(){} // after the player is unmuted
});
</script>
use http://www.tikku.com/jquery-youtube-tubeplayer-plugin
It makes everything easy. Once you have it set up, which shouldn't take long (there is an easy how-to), simply add this line to you player initiation:
onPlayerEnded: function(){ // Do something here },
This will do whatever you want after the player ends. There are also callbacks for when the player is paused, stopped, played, muted, unmuted, queued, and more
Let me know if this works, or if you have trouble using the jquery plugin. It really is very helpful and easy!