Closed namdevel closed 1 year ago
@namdevel
You can try this, but why not use ffmpeg to merge them?
class SeparatedAudio implements PlayerPlugin {
key = 'hello'
name = 'oplayer-plugin-hello'
version = __VERSION__
private $audio: HTMLAudioElement = document.createElement('audio')
constructor(private audioSrc: string) {
this.$audio.src = this.audioSrc
}
apply(player: Player) {
player.on(['play', 'pause'], ({ type }) => {
//@ts-ignore
this.$audio[type]()
this.$audio.currentTime = player.currentTime
})
player.on(['seeking', 'error'], () => {
this.$audio.pause()
})
const loading = $.cls('loading')
player.on(() => {
if (player.$root.classList.contains(loading)) {
this.$audio.pause()
} else {
if (player.isPlaying && this.$audio.paused) {
this.$audio.play()
}
}
})
player.on('seeked', () => {
this.$audio.currentTime = player.currentTime
if (player.isPlaying) this.$audio.play()
})
player.on('volumechange', () => {
this.$audio.volume = player.volume
})
player.on('ratechange', () => {
this.$audio.playbackRate = player.playbackRate
})
// .... other
}
destroy() {
this.$audio.remove()
URL.revokeObjectURL(this.$audio.src)
}
}
@shiyiya because the audio and video hosted in separate files
@shiyiya and why i seeing this, player.context.ui.menu.notice is not a function
@shiyiya and why i seeing this, player.context.ui.menu.notice is not a function
use latest version @oplayer/core
@oplayer/ui
yes, here is my code
<div id="oplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/ui@latest/dist/index.core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.ui.js"></script>
<script>
const audio = new Audio("https://ngewibu.test/stream/audio/1/12771946.mp4");
audio.load();
const UIPlayer = OPlayer.ui({
fullscreen: true,
coverButton: true,
miniProgressBar: true,
autoFocus: true,
forceLandscapeOnFullscreen: true,
screenshot: true,
pictureInPicture: false,
showControls: "always",
keyboard: { focused: true, global: false },
settings: ["loop"],
theme: { primaryColor: "#ffc107" },
speeds: ["2.0", "1.75", "1.25", "1.0", "0.75", "0.5"],
slideToSeek: "none",
controlBar: false, // | { back: 'always' | 'fullscreen' } // appbar
topSetting: false, //show setting icon on appbar
/* Default value, Optional */
/* Custom options */
subtitle: {
color: "white",
fontSize: 30,
fontFamily: "",
source: [
{
name: "Bahasa Indonesia",
default: true,
src: "sub.vtt",
},
],
},
thumbnails: {
number: 100,
src: "https://oplayer.vercel.app/thumbnails.jpg",
},
});
const vplayer = OPlayer.make("#oplayer", {
source: {
src: "https://ngewibu.test/stream/videos/1/12771946.mp4",
poster:
"https://ngewibu.test/static/img/ogv/5d04814e48ef572e97cb18bbe928bbf8086c38cf.png@720w_405h_1e_1c_90q.webp",
title: "Ngewibu.test",
},
}).use([UIPlayer]);
vplayer.create();
vplayer.context.ui.menu.notice("test hello"); // test notice
</script>
<script>
function playMedia() {
audio.play();
}
function pauseMedia() {
audio.pause();
}
function seekMedia() {
audio.currentTime = vplayer.currentTime;
}
// Keep audio and video in sync
function syncMedia() {
audio.currentTime = vplayer.currentTime;
}
// Event listeners
vplayer.on("play", playMedia);
vplayer.on("durationchange", syncMedia);
vplayer.on("pause", pauseMedia);
vplayer.on("seeked", seekMedia);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="oplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/ui@latest/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@oplayer/hls@latest/dist/index.hls.js"></script>
<script>
class SeparatedAudio {
constructor(audioSrc) {
this.audioSrc = audioSrc
this.key = 'hello'
this.name = 'oplayer-plugin-hello'
this.$audio = document.createElement('audio')
this.$audio.src = this.audioSrc
}
apply(player) {
player.on(['play', 'pause'], ({ type }) => {
this.$audio[type]()
this.$audio.currentTime = player.currentTime
})
player.on(['seeking', 'error'], () => {
this.$audio.pause()
})
const loading = OPlayer.$.cls('loading')
player.on(() => {
if (player.$root.classList.contains(loading)) {
this.$audio.pause()
} else {
if (player.isPlaying && this.$audio.paused) {
this.$audio.play()
}
}
})
player.on('seeked', () => {
this.$audio.currentTime = player.currentTime
if (player.isPlaying) this.$audio.play()
})
player.on('volumechange', () => {
this.$audio.volume = player.volume
})
player.on('ratechange', () => {
this.$audio.playbackRate = player.playbackRate
})
// .... other
}
destroy() {
this.$audio.remove()
URL.revokeObjectURL(this.$audio.src)
}
}
const UI = OUI({
fullscreen: true,
coverButton: true,
miniProgressBar: true,
autoFocus: true,
forceLandscapeOnFullscreen: true,
screenshot: true,
pictureInPicture: false,
showControls: 'always',
keyboard: { focused: true, global: false },
settings: ['loop'],
theme: { primaryColor: '#ffc107' },
speeds: ['2.0', '1.75', '1.25', '1.0', '0.75', '0.5'],
slideToSeek: 'none',
controlBar: false, // | { back: 'always' | 'fullscreen' } // appbar
topSetting: false, //show setting icon on appbar
/* Default value, Optional */
/* Custom options */
subtitle: {
color: 'white',
fontSize: 30,
fontFamily: '',
source: [
{
name: 'Bahasa Indonesia',
default: true,
src: 'sub.vtt',
},
],
},
thumbnails: {
number: 100,
src: 'https://oplayer.vercel.app/thumbnails.jpg',
},
})
const vplayer = OPlayer.make('#oplayer', {
source: {
src: 'https://ngewibu.test/stream/videos/1/12771946.mp4',
poster: 'https://ngewibu.test/static/img/ogv/5d04814e48ef572e97cb18bbe928bbf8086c38cf.png@720w_405h_1e_1c_90q.webp',
title: 'Ngewibu.test',
},
})
.use([UI, new SeparatedAudio('https://ngewibu.test/stream/audio/1/12771946.mp4')])
.create()
vplayer.context.ui.notice('test hello') // test notice
</script>
</body>
</html>
thank you @shiyiya can this player add watermark image ? like in top left or whenever custom position ?
thank you @shiyiya can this player add watermark image ? like in top left or whenever custom position ?
document.createlm(img)
img.src =''
img.style.position= ''
vplayer.$root.appendChild(img)
thank you
var img = document.createElement("img");
img.src = "layer.png";
img.style.position = "absolute";
img.style.top = "10px";
img.style.right = "10px";
img.style.width = "200px";
img.style.height = "auto";
vplayer.$root.appendChild(img);
i hope you can add watermark in Oplayer options in future I wanted to take a moment to express my sincerest thanks for your incredible work.
i hope you can add watermark in Oplayer options in future I wanted to take a moment to express my sincerest thanks for your incredible work.
I will consider it, thank u 😄
i'm seeing this error while take a screenshot
i'm seeing this error while take a screenshot
how to add custom slide in settings menu ? like loop menu but custom and handle on off
how to add custom slide in settings menu ? like loop menu but custom and handle on off
i'm confused ^_^
player.context.ui.setting.register()
tester.html:117 Uncaught TypeError: Cannot read properties of undefined (reading 'setting')
oh sorry my mistakes
become default controls in mobile views/device
The real machine is not the same as the fake
i try in my real iOS device and it's same , that was appeared while in the fullscreen mode
i try in my real iOS device and it's same , that was appeared while in the fullscreen mode
Yes, this is normal, ios can only video in full screen
AAh ok, thank you
while i try use another video player, they can show custom controls in my Device
while i try use another video player, they can show custom controls in my Device
try npm i oplayer/core@1.2.26-beta.1
is that available on jsdeliver version ? because i'm not use npm
<script src="https://cdn.jsdelivr.net/npm/@oplayer/core@latest/dist/index.min.js"></script>
replace
how to add multiple thumbnails
image 1 image 2
x : 10 y: 10
x_sizes: 160 y_sizes: 90
how to add multiple thumbnails
image 1 image 2
x : 10 y: 10
x_sizes: 160 y_sizes: 90
https://oplayer.vercel.app/ui/#thumbnails default size is 160 90,
thumbnails = {
src: ['image1','image2'],
x: 10,
y: 6,
number: 60
}
not work, the thumbnails not same with video time
not work, the thumbnails not same with video time
Can you provide an example?
403 If you can provide accessible videos and pictures, I can try to fix the error tomorrow
forbidden access from videoplayer or from url ?
yea
forbidden access from videoplayer or from url ?
not work, the thumbnails not same with video time
Of course, it is possible that the number of thumbnails generated is small and the gaps are too large so they are not that accurate
video duration is 24:00 minutes
video duration is 24:00 minutes
thumbnails = { src: ['image1','image2'], x: 10, y: 10, number: 192 }
Can you provide a complete example, fork template, add video address and thumbnails configuration https://codesandbox.io/s/oplayer-m4inym
i'ts normal ?
I'm not sure if it's normal, it depends on the number of thumbnails you generate, for example, if the video is 10 minutes long and 2 thumbnails are generated, then it's quite inaccurate. If your video is 24 minutes long and there are only 200 thumbnails, then the error of one thumbnail is 24*60/200=13.xxs. As long as the image exists before or after 13s of the video, it means it is normal.
but on bilibili that was same, and in bilibili website player it seem like your player
OK, it is certain that it should be an issue with oplayer. But to fix it you need to provide videos and thumbnails 😂
Can you provide a complete example, fork template, add video address and thumbnails configuration https://codesandbox.io/s/oplayer-m4inym
i has been add
hmm how to save code that i has been modified ?
hmm how to save code that i has been modified ?
just ctrl+s and then share the link to me in the top right corner, or just copy the link in the address bar?
you can click open sandbox in bottom right
hello, how to play separated video and audio files
example i have 2 file