Skip to content

Commit

Permalink
use source elements when overriding native hls in safari in order to …
Browse files Browse the repository at this point in the history
…support airplay, add test
  • Loading branch information
alex-barstow committed Oct 8, 2024
1 parent f6a4f79 commit d2e22ff
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 1 deletion.
9 changes: 8 additions & 1 deletion src/videojs-http-streaming.js
Original file line number Diff line number Diff line change
Expand Up @@ -1079,7 +1079,14 @@ class VhsHandler extends Component {

this.mediaSourceUrl_ = window.URL.createObjectURL(this.playlistController_.mediaSource);

this.tech_.src(this.mediaSourceUrl_);
// If we are playing HLS with MSE in Safari, add source elements for both the blob and manifest URLs.
// The latter will enable Airplay playback on receiver devices.
if ((videojs.browser.IS_ANY_SAFARI || videojs.browser.IS_IOS) && this.options_.overrideNative && this.options_.sourceType === 'hls') {
this.tech_.addSourceElement(this.mediaSourceUrl_);
this.tech_.addSourceElement(this.source_.src);
} else {
this.tech_.src(this.mediaSourceUrl_);
}
}

createKeySessions_() {
Expand Down
39 changes: 39 additions & 0 deletions test/videojs-http-streaming.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -3121,6 +3121,45 @@ QUnit.test(
}
);

QUnit.test('uses source elements when overriding native HLS in Safari/iOS', function(assert) {
const origIsAnySafari = videojs.browser.IS_ANY_SAFARI;
const addSourceElementCalls = [];
let srcCalls = 0;

videojs.browser.IS_ANY_SAFARI = true;

const player = createPlayer({ html5: { vhs: { overrideNative: true } } });

player.tech_.addSourceElement = function(url) {
addSourceElementCalls.push(url);
};

player.tech_.src = function() {
srcCalls++;
};

player.src({
src: 'http://example.com/manifest/main.m3u8',
type: 'application/x-mpegURL'
});

this.clock.tick(1);

assert.equal(addSourceElementCalls.length, 2, '2 source elements added');
assert.equal(srcCalls, 0, 'tech.src() not called');

const blobUrl = addSourceElementCalls[0];
const manifestUrl = addSourceElementCalls[1];

assert.ok(blobUrl.startsWith('blob:'), 'First source element is a blob URL');
assert.equal(manifestUrl, 'http://example.com/manifest/main.m3u8', 'Second source element is the manifest URL');

// Clean up and restore original flags
player.dispose();

videojs.browser.IS_ANY_SAFARI = origIsAnySafari;
});

QUnit.test('re-emits mediachange events', function(assert) {
let mediaChanges = 0;

Expand Down

0 comments on commit d2e22ff

Please sign in to comment.