Dailymotion embedded player on iOS devices (HTML5) - ios

I have a Dailymotion embedded player using the Player api ( http://www.dailymotion.com/doc/api/player.html ) . It works well on a Desktop and a Android Tablet. But on a iOS device, the video just doesn't start. My code is as follows:
<!-- This <div> tag will be replaced the <iframe> video player -->
<div id="player"></div>
<script>
// This code loads the Dailymotion Javascript SDK asynchronously.
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//api.dmcdn.net/all.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
}());
// This function init the player once the SDK is loaded
window.dmAsyncInit = function()
{
// PARAMS is a javascript object containing parameters to pass to the player if any (eg: {autoplay: 1})
var player = DM.player("player", {video: 'somevideoid', width: "100%", height: "100%", params: {autoplay: 0}});
// 4. We can attach some events on the player (using standard DOM events)
player.addEventListener("apiready", function(e)
{
e.target.play();
});
};
</script>

Your code is perfectly valid. The thing is that most mobile devices, including iOS devices, prevent videos from being played automatically (see Apple documentation : Safari HTML5 Audio and Video Guide). On those devices, the first play must be triggered by a user interaction, such as touching the play button, otherwise it's ignored by the browser.
The apiready event is triggered by the Dailymotion SDK and is not a user event. That's why the play() method as no effect on the video.
[Edit]: You'd rather call the play() method from another event listener, such as a click or touchend event..
Also, as the Dailymotion Player is embedded within an <iframe>, the communication between the parent page and the <iframe> will always be considered as a programmatic event by the browser, no matter if the original event from the parent page comes from a user or not.
TLDR: On mobile device, you must wait for the user to touch the player's start screen.

Related

How to record audio and play it back in Safari on iOS in one click?

Problem: Safari will throw exceptions when certain actions are performed to audio elements inside of a callback.
This includes:
Playback
Setting the src property
Playing a URL object that was recorded/generated by the user
I need to record audio and visualize the data in one step. When a button is clicked, the recorded audio should be played back.
My application works like this: The user presses a record button, and the application begins recording audio once the user gives permission for the app to record. When the user presses the stop button, the recording is stopped and then two asynchronous operations happen:
Recording Phase
I. The user stops the recording by pressing a stop button in the UI.
This invokes the stop method on the recording controller class.
II.
Two asynchronous methods fire here: 1. The audio is decoded into an
object URL and set to the src of an HTMLAudioElement that is not
loaded into the DOM. 2. The audio is decoded into a buffer then
visualized on the screen.
//RecordingController
public stopRecording(): Promise
{
return new Promise( (resovle,reject)=>
{
if (this._isRecording)
{
this._isRecording=false;
this._mediaRecorder.stop();
this._mediaRecorder.onstop=()=>{
const blob = new Blob(this._recordBuffer, { 'type' : 'audio/ogg; codecs=opus' });
this._recordBuffer=[];
this.emitter.emit("recording-stopped",blob);
//another view subscribes to recording-stopped and visualizes the data
resovle(blob);
};
}
else {
reject();
}
});
}
//Vue UI - invoked when pressing stop button
protected stopRecording()
{
this.recording=false;
const stopRecording=()=>{
this.controller.stopRecording().then(blob=>{
console.log("RECORDING STOPPED!")
const url = URL.createObjectURL(blob);
if (this._data.item)
{
this._data.item.src=url;
}
this._data.hidePlay=false;
this.emitter.emit("recording-stopped");
});
};
if (!this.isIos)
{
setTimeout(stopRecording,500);
}
else {
stopRecording();
}
}
Everything works perfectly in Firefox and Chrome on Android and Windows. Also works perfectly on Chromium edge. I've devised an unacceptable workaround on Safari iOS that works, partially. When the user presses the play button, it decodes the object URL into a data URL, performs the visualization and then sets the SRC to the data url instead of the object url. Play is also invoked when the data URL is returned, but it fails because it's done in an asynch method. When play is pressed a 2nd time, it plays but is not audible.
Giving an onscreen in-DOM HTMLAudioElement the data URL will play back the audio data and you can hear it. The unacceptable workaround is to use the default HTMLAudioElement.

JWPlayer - Click to play interpreted as autoplay on iOS Safari/Chrome

I'm working on a custom player built around a JWPlayer. When clicking the "Play" button, I first fetch the content asynchronously, and once the content is fetched, i call jwplayer.setup(config), followed by jwplayer.play().
Listening to the "playAttemptFailed" event, i get the following error: "303210 - The play attempt was interrupted for unknown reasons".
If i set 'mute' as 'true' in the jwplayer.setup(), then everything works, which makes me believe it is related to the autoplay policies.
Is there any way to remedy this? It should not be treated as autoplay, since the user interaction (play button click) did indeed happen, right?
This only happens on iOS.
I had the same issue on IOS device, so I fixed calling the jwplayer when the site is loaded and call play function on click event:
var player = null;
var playerButton = document.getElementById('buttonPlayer');
function initializePlayer() {
player = jwplayer.setup({ file: '<STREAMING_URL>'});
}
function playButtonFunction() {
player.play(true);
}
playerButton.addEventListener('click', function() {
playButtonFunction();
});
window.addEventListener('load' , function() {
initializePlayer();
});

How can stop youtube video sound after close inappbrowser

How can stop youtube video sound after closing webview opened by inappbrowser(Android Phonegap 2.4.0 plugin)
I used two week to fix that problem and tired out..............
When I click 'Done' button to close webview(youtube page), the video still play in the background.
Even after shutting down app, can't stop video sound.
To stop video I had to turn off phone.
This is my code
<script type="text/javascript" charset="utf-8">
function OpenWin(juso) {
window.open(juso, '_blank', 'location=yes');
}
</script>
<body>
...................
<a href="#" onclick="OpenWin('http://m.youtube.com')">
...................
</body>
Is there any wrong in my code?
May I get some help?
I am using Sencha Touch and using the following trick to stop the Youtube Video sound. You may take it as reference.
var ref = window.open(url,'_blank',options);
ref.addEventListener('exit',function(){
Ext.defer(function(){
ref.removeEventListener('exit',function(){
console.log('Closed');
});
var ref2 = window.open('about:blank','_blank','hidden=yes');
Ext.defer(function(){
ref2.close();
},350);
},350);
});

How to bind the HTML5::stalled event from soundmanager?

I'm trying to to write a javascript app that use the [SoundManager 2][1] api and aim to run in
all desktop and mobile browsers. On the iPad platform, Soundmanager is using the HTML5 audio api since there is on flash support. Now, when I'm trying to play two audio files back to back, both loaded in response to a click event, a [HTML5::stalled][2] event is occasionally raised. How do I set an event handler to catch the stalled event?
Since sound objects in my app are created on the fly and I don't know how to access directly to tags that are created by SoundManager, I tried to use a delegate to handle the stalled event:
document.delegate('audio', 'stalled', function (event) {...});
It doesn't work. the event did not raised in respond to stalled. (I had an alert in my handler).
Also tried to use [Sound::onsuspend()][3] to listen for stalled, but onsuspend pops out
on the end of sound::play(). How can we distinguish between stalled and other events that may raise the audio::suspend? Is there any other way to access the tags that SoundManager must create in order to play HTML audio?
I solved it with the following solution. This is not documented and found by reverse engineering.
It is all about accessing the html audio object, which is availalbe under _a.
currentSound = soundManager.createSound({..});
currentSound._a.addEventListener('stalled', function() {
if (!self.currentSound) return;
var audio = this;
audio.load();
audio.play();
});
The body of the method is based on this post about html5 stalled callback in safari
I can suggest a different "fix" I use with an html5 using platform (samsung smart TV):
var mySound = soundManager.createSound({..});
mySound.load();
setTimeout(function() {
if (mySound.readyState == 1) {
// this object is probably stalled
}
}, 1500);
This works since in html5, unlike flash, the 'readystate' property jumps from '0' to '3' almost instantanously, skipping '1'. ('cause if the track started buffering it's playable...).
Hope this works for you as well.

missing html5 video "ended" event on iPad

Sometimes my HTML5 video does not generate an "ended" event on the iPad. Seems only to happen when I omit the "controls" attribute and start playback from javascript. It usually works fine the first time, but the second time the video plays out but does not generate an "ended" event. I do call "load()" after each playback in order to reset to the beginning of the clip (because seeking doesn't seem to work at all - see this thread). I have a workaround, which is to track "timeupdate" events and perform my end-of-play actions when vid.currentTime>=vid.duration, but I was wondering if anyone else had experienced this problem. Some relevant code follows.
Cheers
-Chris
The document onload function:
function load() {
var vid = document.getElementById('vid');
vid.addEventListener('ended', function() {
alert('video ended');
vid.load();
},false);
}
The html:
<body onload="load();">
<h1>HTML5 Video Test</h1>
<input type="submit" value="Play" onclick="document.getElementById('vid').play();">
<video id="vid" src="test.mov" width="640" height="480"></video>
</body>
Don't use load() to force the seek. If you set video.currentTime to 0.1 instead of 0 the video will jump to the beginning and the ended event will still dispatch properly. (Tested on iOS 3.2 and 4.2)

Resources