I have discovered Universal HTML5 players like http://www.jplayer.org/ , but none of them have a record button. Wondering if there is one, similar to the one in the image below:
You can use video.js with this plugin for recording audio/video
Here's the example:
var player = videojs("recorder",
{
controls: true,
width: 600,
height: 300,
plugins: {
wavesurfer: {
src: "live",
waveColor: "black",
progressColor: "#2E732D",
debug: true,
cursorWidth: 1,
msDisplayMax: 20,
hideScrollbar: true
},
record: {
audio: true,
video: false,
maxLength: 20,
debug: true
}
}
});
<audio id="recorder" class="video-js vjs-default-skin"></audio>
<script src="http://vjs.zencdn.net/6.2.0/video.js" defer></script>
<script src="path/to/recorder/plugin.js" defer></script>
Related
I want to remove the click event which switch player status between play and pause.
Here is my code.
<template>
<video-player
ref="videoPlayer"
:options="playerOptions"
:playsinline="false"
#play="onPlayerPlay($event)"
#pause="onPlayerPause($event)"
#ended="onPlayerEnded($event)"
#loadeddata="onPlayerLoadeddata($event)"
#waiting="onPlayerWaiting($event)"
#playing="onPlayerPlaying($event)"
#timeupdate="onPlayerTimeupdate($event)"
#canplay="onPlayerCanplay($event)"
#canplaythrough="onPlayerCanplaythrough($event)"
#ready="playerReadied"
#statechanged="playerStateChanged($event)"
/>
</template>
.........................
data() {
return {
// videojs options
playerOptions: {
autoplay: false,
muted: false,
preload: 'auto',
language: 'zh-CN',
playbackRates: [0.75, 1.0, 1.25, 1.5, 2.0], // 播放速度
aspectRatio: '16:9',
fluid: true,// 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
notSupportedMessage: '此视频暂无法播放，请刷新后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controls: true, // 下面的控制按钮
bigPlayButton: false,
controlBar: {
playToggle: false, // 播放按钮
timeDivider: false, // 时间分割线
durationDisplay: false, // 总时间
remainingTimeDisplay: false, // 剩余播放时间
progressControl: true, // 进度条
fullscreenToggle: false // 全屏按钮
},
sources: [{
type: 'video/mp4',
// mp4
src: ''
// webm
// src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
userActions: {
click: false // it does not work
}
}
}
},
refer to userAction
Controls how clicking on the player/tech operates. If set to false, clicking is disabled and will no longer cause the player to toggle between paused and playing. If controls are disabled with controls: false, this will not call the handler function.
If undefined or set to true, clicking is enabled and toggles the player between paused and play. To override the default click handling, set userActions.click to a function which accepts a click event (in this example it will request Full Screen, the same as a userAction.doubleClick):
how to unmute video using an observer?
if I remove "true" in this code "$(this).prop("muted", true);" the video won't play automatically and if I don't remove it the video play automatically but is still muted
$("video").each(function() {
$(this).prop({
controls: true,
controlslist: "nodownload"
});
const observer = new window.IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
if (this.paused) {
$(this).prop("muted", true);
this.play();
}
} else {
this.pause();
}
}, {
threshold: 0.5,
}
);
observer.observe(this);
});
In chrome, there is a tab beside the extensions to see the videos playing. it only appears when you play a song or video in the browser. when starting a video on youtube, I can see in that tab a background image and the title of the video and the name of the channel are already on Spotify, I can also see an image, the title of the song and the name of the artist, however, I still haven't found the medium with which they do this, for sure it is with javascript, because I searched the code of two sites mentioned and there is no or tag there and on my site with these tags only the page title appears on that tab.
I saw in the MDN documentation a single quote from Rich Media, but they do not go into details, they just say that it offers support and it is not what I want, it seems that this is to display ads, after all, searching on google what I discovered about it was a YouTube API to incorporate videos and tutorials talking about how to show subtitles for youtube videos, that's not what i want, i want to show the video data on this tab, at least replace the page title with the video title.
What is needed to show how in the image above?
<video controls>
<source src="/msun.mp3" type="audio/mp3">
<track label="English" kind="subtitles" srclang="en" default>
Your browser does not support the audio element.
</video>
They use the MediaSession API.
Code example from linked MDN article:
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Unforgettable',
artist: 'Nat King Cole',
album: 'The Ultimate Collection (Remastered)',
artwork: [
{ src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' },
{ src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
{ src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
{ src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
{ src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
{ src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
]
});
navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('stop', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('seekto', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('skipad', function() { /* Code excerpted. */ });
}
I'v got jwplayer source code from github. I want to change some scripts and built the player. So, i need to change file source from javascript in flash. In javascript i'm setting some params "host" and "flv_id":
jwplayer("mediaplayer").setup({
autostart: false,
controlbar: "none",
displayclick: "none",
smoothing: true,
stretching: "exactfit",
icons: false,
flashplayer: "/jwplayer.swf",
file: "/videos/3aae1ef41d.flv",
flv_id: "115554",
host: "<?php echo $host; ?>",
provider: "http",
startparam: "start",
height: 400,
width: 650,
events: {
onComplete: function() {
},
onPause: function(event) {
},
onError: function() {
}
}
});
In flash i have some class, which can make post-request:
var post:Post = new Post("http://"+someparameters["host"]+"/video/flv");
post.variables.id = someparameters["flv_id"];
post.Send(Go);
Go - is success callback function that returns some flvlink.
Go(link:String):void {
//link - is source, that i need to play
}
The player is playing the "/videos/3aae1ef41d.flv". But i want to play the source from Go(); I have class "Post", but i don't know the place to paste my code. Now, i haven't any changes in default source code. I don't know which file of player source code to edit. So, i need to know, how i can use my "Post" class to play video from Go function.
Please how to remove on pause , share menu , in this embed code ?
<script>
$(document).ready(function(){
$('#ansalive_player_mod2').empty();
$('#ansalive_player_mod2').flash(
{
src: '/player.swf',
width: 680,
height: 400,
quality:'high',
allowfullscreen: 'true',
flashvars: { file: 'n24stream?adbe-live-event=news24', streamer: 'rtmp://66.55.93.203/livepkgr/', image: '/news24/live/emisionet/img/live3.png', skin: '', autostart: 'true', volume: '50', quality:'medium', stretching: 'exactfit' }
},
{ version: 2 }
);
});
</script>
Use this copy of player.swf, it does not have the share menu on pause - http://player.longtailvideo.com/player.swf