-
-
Notifications
You must be signed in to change notification settings - Fork 64
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Provide non-React JS API #16
Comments
Yea, it would be nice, not everyone using React. |
Like me :-) I'm trying to build an electron video player with non h264 capabilities, to build a video app around video, and it's not easy to find another component than WebChimera.js... The problem is WCJS is not sure for the futur, and had no hw decoding capability... Perhaps it's electron that is not the right choice... Hope you take time to build that Vanilla JS MPV component :-) |
Yeah I second this one. I was able to read through the react component code and cobble something together to create an angular component. A vanilla example would have been very helpful though. If I get a breather I'll look over my code for the component and see if I can break it down into something vanilla, it's a simple one, so a lot easier to use. I'm using this for an Electron app (angular as the framework) and it works great so far. I needed multicast video playback as a requirement. I spent time in WCJS hell, mpv.js is serious a blessing. It took me a day or so to get up and running, including compiling on an ancient distro. Easier to maintain, seems quicker, a bit more flexible, and works. |
would love this too :D and as a side note, I tried to vueify it but couldn't get require.resolve to work so far because I'm using webpack and it's returning the module id instead of like node returning the actual path |
If anyone's interested, I spent about half an hour getting some basic functionality working without react. This may be a helpful starting point for anyone interested: var embed = document.createElement('embed');
embed.type = 'application/x-mpvjs';
document.body.insertBefore(embed, document.body.firstChild);
embed.addEventListener('message', function(recv) {
if (recv.data.type == 'ready') {
var type = 'command';
var data = ['loadfile', '/home/tom/tmp/mpv.js/example/tos.mkv'];
const send = {type, data};
embed.postMessage(send);
}
}); Take a look at |
@TRPB Can the code be used at Chromium browser? |
If the extension will load, probably but it's rather pointless unless your site is an intranet site and you have control of all the installations. |
@TRPB What mean is using mpv.js without an "extension". As Chromium uses a video decoder (for VP8 and VP9 and potentially in the future for any codec) that does not resize HTML |
If this helps, I made a Vue component fully compatible: <script>
export default {
name: 'MpvWrapper',
data: () => ({
style: {
display: 'block',
width: '100%',
height: '100%',
'pointer-events': 'none' // Allows cursor to be handled directly by MPV?
},
plugin: null,
mimeType: 'application/x-mpvjs',
mouseClick: {
left: 0,
timeout: null
}
}),
props: {
onPropertyChange: {
type: Function,
default: () => {}
},
onReady: {
type: Function,
default: () => {}
}
},
mounted () {
this.$el.addEventListener('message', this._handleMessage)
window.addEventListener('keydown', this.keypress)
this.property('cursor-autohide', 'always')
},
beforeDestroy () {
window.removeEventListener('keydown', this.keypress)
},
methods: {
/**
* Send a command to the player.
*
* @param {string} cmd - Command name
* @param {...*} args - Arguments
*/
command (cmd, ...args) {
args = args.map(arg => arg.toString())
this._postData('command', [cmd].concat(args))
},
/**
* Set a property to a given value.
*
* @param {string} name - Property name
* @param {*} value - Property value
*/
property (name, value) {
this._postData('set_property', { name, value })
},
/**
* Get a notification whenever the given property changes.
*
* @param {string} name - Property name
*/
observe (name) {
this._postData('observe_property', name)
},
/**
* Send a key event through mpv's input handler, triggering whatever
* behavior is configured to that key.
*
* @param {KeyboardEvent} event
*/
keypress ({ key, shiftKey, ctrlKey, altKey }) {
// Don't need modifier events.
if ([
'Escape', 'Shift', 'Control', 'Alt',
'Compose', 'CapsLock', 'Meta'
].includes(key)) return
if (key.startsWith('Arrow')) {
key = key.slice(5).toUpperCase()
if (shiftKey) {
key = `Shift+${key}`
}
}
if (ctrlKey) {
key = `Ctrl+${key}`
}
if (altKey) {
key = `Alt+${key}`
}
// Ignore exit keys for default keybindings settings.
if ([
'q', 'Q', 'ESC', 'POWER', 'STOP',
'CLOSE_WIN', 'Ctrl+c',
'AR_PLAY_HOLD', 'AR_CENTER_HOLD'
].includes(key)) return
this.command('keypress', key)
},
_postData (type, data) {
this.$el.postMessage({ type, data })
},
_handleMessage ({ data: { type, data } }) {
const actions = {
property_change: () => this.onPropertyChange(data.name, data.value),
ready: () => this.onReady(this)
}
const action = actions[type]
action && action()
}
},
render (h) {
return this.$createElement('embed', {
ref: 'plugin',
staticClass: 'mpv-wrapper',
style: this.style,
attrs: {
type: this.mimeType
}
})
}
}
</script> It's highly inspired by the React component given by <template>
<mpv-wrapper
:onReady='handleMPVReady',
:onPropertyChange='handlePropertyChange'
/>
</template>
<script>
import MpvWrapper from '/path/to/wrapper.vue'
export default {
components: { MpvWrapper },
data: () => ({
mpv: null
}),
methods: {
handleMPVReady (mpv) {
this.mpv = mpv
console.log('Player is ready')
},
handlePropertyChange (name, value) {
console.log('Property change:', name, value)
}
}
}
</script> If needed, I can PR this into the lib. Hope it'll help someone 😄 |
hi, i try to use your code. but i failed. is there any other code or config i need to do? |
I'm afraid I'd need more details here 🤔 |
a quick browse of the fork network: https://github.com/pavladan/mpv.js tested this fork, works perfectly with no react dependency 👍 |
FWIW am not sure why this question Playing audio files in unsupported codecs through tag over at SO received a "downvote" already. The case appears to be precisely solvable by using this repository. Tested loading both CAF and AMR at native |
@TRPB I've been trying to use your JS way. How do you even trigger play for example? |
You need to use Here's a more complete solution I ended up using: class MPV {
constructor(container) {
this.embed = document.createElement('embed');
this.embed.type = 'application/x-mpvjs';
this.events = {};
container.appendChild(this.embed);
this.embed.addEventListener('message', this.recv.bind(this));
}
property(name, value) {
const data = {name, value};
this._postData("set_property", data);
}
recv(event) {
var type = event.data.type;
if (this.events[type]) {
this.events[type].bind(this)(event);
}
}
_postData(type, data) {
const msg = {type, data};
this.node().postMessage(msg);
}
command(cmd, ...args) {
args = args.map(arg => arg.toString());
this._postData("command", [cmd].concat(args));
}
observe(name) {
this._postData("observe_property", name);
}
keypress(key) {
this.command("keypress", key);
}
node() {
return document.getElementsByTagName('embed')[0];
}
on(event, listener) {
this.events[event] = listener;
}
} You can do things like var mpv = new MPV(document.getElementById('video'));
mpv.property('deinterlace', 'yes');
mpv.property('vf', 'vf=vavpp:deint=motion-adaptive:interlaced-only=yes'); Properties are just the command line switches from here: You can also send commands like loadfile:
see here for a full list: https://mpv.readthedocs.io/en/latest/api.html //play the video by unpausing
mpv.property('pause', false); and receive events: mpv.observe('duration');
mpv.on('duration', function(data) {
console.log(data);
}); or mimic a key press: //toggle interlacing via key press
mpv.keypress('I'); For keys and commands see: https://github.com/kba/mpv-config/blob/master/input.conf |
@TRPB Ok thanks for that! So do I put your first part of your code and replace the index.js in the module, then call the module the usual way then do the second part+ of your code in my actual app? |
@TRPB I'm getting Then in the html: `var {MPV} = require("mpv.js"); var mpv = new MPV(document.getElementById('video')); Edit: I think I have an idea whats going on. Modules can't access the DOM in Nw.Js. Not as easily anyway. Working on a workaround. |
I implement the class.
You can use it like this.
|
@biaogewow nice! I might give this a shot actually! |
@Kylart I initially got an error on render (h) {
return this.$createElement('embed', {
ref: 'plugin',
staticClass: 'mpv-wrapper',
style: this.style,
attrs: {
type: this.mimeType
}
})
} because this.$createElement was apparently not a function but I was ableto fix that by importing 'h' from vue and calling that instead like so: render () {
return h('embed', {
ref: 'plugin',
staticClass: 'mpv-wrapper',
style: this.style,
attrs: {
type: this.mimeType
}
})
} But after that I'm getting an error here: _postData (type, data) {
this.$e1.postMessage({ type, data })
}, TypeError: Cannot read property 'postMessage' of undefined I'm new to Electron, Vue, and JS so I'm not even sure what this.$e1.postMessage({ type, data }) is supposed to do but maybe it has to do with the 'this' reference being different for functions defined within the methods json? |
emmmmmm, Looks like a misspelling |
Hi,
Do you think about building a vanilla JS MPV component ?
It would be cool :-)
The text was updated successfully, but these errors were encountered: