We are in the process of switching over to the new HTML5 Brightcove player. It seems to be working correctly with all of our preferred functionality. However, when you hover over the scrubber there is no time tooltip, and we can find no way to restore this functionality.
Is it possible to get a hover tooltip on the scrubber of the new Brightcove player showing the time, and possibly a screenshot?
The code we're using to display the player is as follows:
<video style='width:482px; height:392px; bgcolor:#FFFFFF;'
id="BCvideoPlayer"
data-video-id="#videoID#"
data-account="xxxxxxxxxxxxxxx"
data-player="default"
data-embed="default"
data-width="482"
data-height="392"
class="video-js" controls></video>
<script src="//players.brightcove.net/xxxxxxxxxxxxxxx/default_default/index.min.js"></script>
We were informed by Brightcove support that this is not supported by the current player, but has been submitted as an enhancement requested.
In the mean time we have made this work using the following plugin: https://github.com/mickey/videojs-progressTips, though we had to modify one line of the file to account for the Brightcove changes to the underlying player:
$("#vjs-tip").css("top", "" + (event.pageY - $(this).offset().top - barHeight - 25) + "px").css("left", "" + (event.pageX - $(this).offset().left + 125) + "px").css("visibility", "visible");
Related
I have a simple webpage with an HTML 5 <video> element and simple Javascript for creating links to switch between videos and for making each video stop at predetermined times.
It appears to work fine on Chrome 94, Edge 99, and Vivaldi 4.3 (I am on Windows 10).
In my Firefox 91.7esr, however, when the video stops (at a stop time or at the end), the screen will often black out for about 1 second.
After that, everything continues normally.
It is the entire screen that blacks out, not only the Firefox window or the <video> element on the page.
This happens irregularly about one third of the times (and much less frequently also when the video starts).
Why?
The web page and the videos are local files.
The effect occurs no matter whether hardware acceleration is on or off in Firefox.
It happens also after a reboot.
Here is the respective code:
<!DOCTYPE html>
<html>
<body>
<video id="pomalevi-video" height=540 controls>
Your browser does not support the video tag.
</video>
<br>
<button onclick="pmlv_speed(pmlv_video, 1.0)">1.0x</button>
<button onclick="pmlv_speed(pmlv_video, 1.7)">1.7x</button>
<button onclick="pmlv_speed(pmlv_video, 2.0)">2.0x</button>
<p onclick='pmlv_switch_to(1)'>start video 1</p>
<p onclick='pmlv_switch_to(2)'>start video 2</p>
<script>
var pmlv_video = document.getElementById("pomalevi-video")
var pmlv_video_idx = 1
var pmlv_stoptimes = [[5.1, 8.5, 11.9], [17.0, 20.4]] // list of list of floats: stop times in seconds
function pmlv_pause_at_stoptimes() {
for (var t of pmlv_stoptimes[pmlv_video_idx-1]) {
if(pmlv_video.currentTime >= t && pmlv_video.currentTime <= t+0.5) {
pmlv_video.pause()
pmlv_video.currentTime += 0.5
}
}
}
function pmlv_speed(obj, factor) {
obj.playbackRate = factor
}
function pmlv_switch_to(i, play=true) {
pmlv_video.src = "v" + i + ".mp4"
pmlv_video_idx = i // select the relevant stoptimes
pmlv_video.load()
if (play) {
pmlv_video.play()
}
}
pmlv_video.addEventListener("timeupdate", pmlv_pause_at_stoptimes)
pmlv_switch_to(1, false)
</script>
</body>
</html>
The problem has nothing to do with my HTML or Javascript.
Rather, it appears to be a hardware issue:
The problem occurred on an external monitor that is connected
to my notebook via, first an Icy Box IB-DK2403-C docking station
using USB-C and from there via HDMI.
When I play the video on the internal screen of the notebook,
the problem still occurs, but what is blacked out is still
the external monitor, not the internal one having the Firefox window.
If I connect the monitor to the notebook's HDMI output directly, rather than
through the docking station, the problem disappears.
Furthermore, the setup also appears to be sensitive to audio start/stop
as well: I have seen the screen black out when Windows notification
sounds were played.
But the video still produces the effect with the sound turned off
in the <video> element's controls, so apparently both audio and
video starting or stopping can produce a blackout. Weird.
Why the other browsers are immune to the problem? No idea. (Hints welcome!)
The reason why I did not understand this more quickly is
that I started testing my application only one day after
I had started using the docking station.
I had not yet noticed the blackouts that occurred at other times.
In a video.js player, I want to display information on the currently played video as an videojs-overlay whenever the user is active (moving the mouse over the video) and hide the information when the user is inactive (not moving the mouse over the video).
I set videojs-overlay to listen to the useractive and userinactive events like this:
player.overlay({
content: 'Default overlay content',
debug: true,
overlays: [{
content: 'The user is active!',
start: 'useractive',
end: 'userinactive'
}]
});
Unfortunately, the overlay is not triggered at first, but then, it starts working after the video is playing for ca. 1 minute.
Is there a problem with my setup, or might this be a bug in videojs or videojs-overlay? What can I do to debug this?
Video.JS already keeps track of the user active state using CSS classes. An example of this can be found in the videojs-dock plugin. It uses the vjs-user-inactive and vjs-user-active CSS classes to control showing or hiding a dock or tray over the video that can be used to display information such as a title or description for the video. You may be able to use this as inspiration for your overlay.
Please let me know if you have any additional questions.
Disclaimer: I am employed by Brightcove.
I've been checking into some issues with Facebook Like Box plugins on websites my company manages, and have seen different behavior in the past two days. Can anyone help to explain if this is more likely an issue with Facebook, or the target profile/page settings?
I'll focus on the more obvious one here.
When the 'Show Faces' option is disabled and no Data-height is explicitly specified for the plugin, the area to display the Stream activities is reduced to 0 and all that is displayed is a double horizontal line.
Working from the Developers.facebook demo page
(https://developers.facebook.com/docs/reference/plugins/like-box/)
1) Enter a valid facebook Page for the address
-- Defaults should display with width=292, height blank, and all other options checked.
2) un-check 'Show Faces'
-- Like Box shrinks to only display Header, and the Social Plugin footer.
3) Enter a Height value ( anything above 150 px should display some area of content and the vertical slider again, but with the Like Box total height restricted to the height entered)
(I wanted to post this to Facebook as a Bug report, but could not find the correct steps to do so.)
Facebook must have changed something. This only seems to be affecting the HTML5 implementation of this plugin. Some other sites which I maintain, which use the iframe implementation, do not seem to be affected.
I just added a fixed 'data-height' attribute to the 'fb-like'box' div of the HTML5 implementation of the plugin - seems to have done the job.
Looks like they have changed (or broke) the default value for height from "300px" (I think that is what it was) and replaced it with the 120px which leaves no room for the stream. If you add faces it ups the default value and leaves room for the stream.
If you change the height of the box to say 600px (depends on what you want) then even with faces off it will show the stream.
For example if you goto: https://developers.facebook.com/docs/reference/plugins/like-box/
Then turn stream on and faces off (even on the default site of FB Dev) it will still hide the stream with no height specified. Then change the height to say 600px the stream will appear.
Feels like less of a bodge than the other method that Nathan mentioned (which I couldn't get to work anyway! :( LOL)
Hope this helps someone else. :)
This is my first question, so your patience is much appreciated. I am having a weird issue with safari/chrome mac users only. This works superbly in IE7, IE8, Chrome, FF and safari(windows). Trying to determine and isolate the issue related to safari/chrome browsers since they start playing the embeded video inside hidden div immediately on page-load.
My company redesigned their homepage and I built it on our site recently. I am fairly new and this was my first solo webpage with JQuery slider, HTML5 etc. (I am unable to provide the link here).
Description of the page:
I have a slider in place which is using the auto-advance.js file to
automate the rotation of images every 7 seconds.
One of the images belonging to this image list slider has a "play video"
button. Below is the image map area which calls a javascript
function on "play video" href click that "hides the image" and "displays the video div"
Javascript function:
`function doStuff() {
$('div#vid').css('display','inline');
$('img.hid').css('display','none');
}
`
Here is the hidden div with HTML5 iframe youtube embed code:
`<div style="display:none;" id="vid">
<iframe class="youtube-player" type="text/html" width="770" height="430" src="http://www.youtube.com/embed/cPoENdJx5DQ? wmode=transparent&feature=player_embedded&autoplay=1&rel=0" frameborder="0" allowfullscreen="false">
</iframe>
</div>
`
Everything works beautifully in windows but for mac users the video starts playing in the background (since the div is still hidden they hear music from the video). To fix the issue immediately I had to swtich off the autoplay option (here I edited it back to 1) on the site which has solved the issue temporarily.
I am trying to understand why chrome/safari mac browsers are autoplaying the video on pageload itself and not on href "play video" button click.
I have carried out detailed research and could only find this article on the issue : http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27722407.html, which makes me think that maybe this could be because of some code clash possibly? And if it is then why the browsers in windows are working perfectly?
Any help is much appreciated!
I would suggest:
function vidrun(){
var span = document.createElement("span");
span.innerHTML = 'code here for video';
document.getElementById("the surrounding element's id").appendChild(span);
)
This will only add the video when you get to the time you want the video to automatically start playing instead of actually already loading the video and starting it.
All you will have to do to start the video playing when you get to that point is to call the vidrun() and done :]
How do I automatically expand an embedded youtube video when the user presses play?
The situation:
- For various reasons the ideal layout of the webpage mans that the video player must appear initially at a small size (let's say 480x385) when the user arrives on the page
- The video being shown contains some detail and is difficult to watch at 480x385
- Right now the user must click on the "full-screen" icon which comes standard in every youtube video player. This is irritating to many people.
The desired solution:
- When users click on the video to play it, the player automatically expands to a more reasonable size (e.g., 640x385 or 853x505) and plays at that size
- The video could be played in a modal overlay, but other solutions would be welcome as well
- Upon completion of the video, the expanded view should automatically disappear and the video should appear in it's original size on the page
You basically need two things:
The ability to detect when the the video is playing. You should be able to figure that out from this YouTube example.
Resize the player by changing the height and width properties of the "object" node that contains the player.