I was trying to build a video / image slider for mobile devices and I'm using Brightcove to display my videos.
Though due to limitations in the Brightcove versions I'm struggling to get my slider to work after a video has been played since I remove my overlay and Brightcove inserts an Iframe which disables pretty much all of my touch events (which are handled via hammer.js).
Let me show you my code:
Slider Markup:
<div id="wrapper">
<div class='slide'>
//Brightcove Player get's inserted here. Images are displayed via background
</div>
<div class='slideprevious'>
</div>
<div class='slidefollowing'>
</div>
</div>
Brightcove Initialisation:
var addVideo = function(){
$('.slide').append('<div id="tsVideoPlayer"></div>');
tsCreatePlayer('tsVideoPlayer', slides.eq(num).data('video-id'), 'XXXXXXXX');
if(typeof bcPlayer === 'undefined'){
$.when(
//asynchronous loading of JS
$.getScript( "http://admin.brightcove.com/js/BrightcoveExperiences_all.js" ),
$.getScript( "/xxx/xxx/brightcove_video.js" ),
$.Deferred(function( deferred ){
$( deferred.resolve );
})
).done(function(){
addVideo();
});
} else {
addVideo();
}
Event Handling:
function getPlayerId(data) {
for (var prop in data)
return prop;
}
var player = bcPlayer.getExperience(getPlayerId(bcPlayer.experienceObjects)).modules.videoPlayer;
player.addEventListener(BCMediaEvent.PLAY, onPlayEventFired);
player.addEventListener(BCMediaEvent.STOP, onStopEventFired);
function onPlayEventFired() {
alert("play");
}
function onStopEventFired() {
alert("stop");
}
brightcove_video.js: http://pastebin.com/fTL5Uhqc
This actually works flawlessly on my Desktop in every browser. But as soon as I test it on Apple devices it doesn't work since the Flash Object isn't loaded anymore, but instead an iFrame.
There are two Brightcove player API versions -- the legacy Flash-only player API and the Smart Player API. You're using the former which as you've guessed by now doesn't work with HTML players.
This doc on the Brightcove support site details refactoring your code from the old to the new player API.
Related
I have a lecture on YouTube that I would like to use as the header movie for my twentyseventeen child themed website. I would like it with sound and without autoplay (As viewed on YouTube, the video has sound intact).
Following another question about autoplay, I set a video URL of https://www.youtube.com/watch?v=1dYAYBNU6qM&autoplay=0. The behavior does not appear to have changed. It starts immediately, but sound is muted.
How, with twentyseventeen, do I have an option of a media file that starts paused, and begins to play, with sound, if the user hits the 'Play' button?
You can use global object wp for get access to youtube player functions. Youtube video in twentyseventeen theme loads wp-custom-header.js file and creating new object in 384 line.
Here is some solution you can use:
var ww_timer = setTimeout(function ww_video() {
if(wp.customHeader.handlers.youtube.player == null){
ww_timer = setTimeout(ww_video, 50);
}else {
if(typeof wp.customHeader.handlers.youtube.player.unMute === "function") {
wp.customHeader.handlers.youtube.player.unMute();
wp.customHeader.handlers.youtube.player.stopVideo();
}else{
ww_timer = setTimeout(ww_video, 50);
}
}
}, 50);
This code goes to my_js.js file( I created it in the main directory of active child theme. You can add this code to another .js, if you have it ) of your active child theme. Also, we need to update functions.php file using this code:
function ww_youtube_functions(){
wp_enqueue_script('ww_youtube_video',get_stylesheet_directory_uri().'/my_js.js',array('wp-custom-header'),false, true);
}
add_action('wp_enqueue_scripts', 'ww_youtube_functions');
Required part of this code is array('wp-custom-header'): enqueue script with dependence with script wp-custom-header.
setTimeout is not best way. I believe, that it can be done with more elegant code.
But its tested and working.
I had everything working fine until about two weeks ago. I haven't changed any code.
function loadYtVideo(video, advert, advert_link, splash, splash_link){
var params = { allowScriptAccess: "always", wmode: "transparent" };
var atts = { id: "eda-player", wmode: "transparent" };
var swfobject;
adv.orig = video;
swfobject.embedSWF("https://www.youtube.com/v/"+adv.orig+"?rel=0&enablejsapi=1&playerapiid=ytplayer","ytapiplayer", "719", "404", "8", null, null, params, atts);
}
function onYouTubePlayerReady(playerId) {
//It's fired
edaplayer = document.getElementById('eda-player');
edaplayer.addEventListener("onStateChange", "playerState");
}
function playerState(state) {
//it's not fired
console.log(state);
}
<div class="adv-video">
<div id="ytapiplayer">
<script>
$(document).ready(function(){
loadYtVideo($.getUrlVar('ytVideo'), 'eM2ja9LE0YE', 'http://wilmax.ru/', '', '');
});
</script>
</div>
</div>
I found posts with similar problem, but solutions in those posts are not working in this case.
Any help would be greatly appreciated.
I would suggest you move to YouTube IFrame Player API:
The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript. Unlike the Flash and JavaScript player APIs, which both involve embedding a Flash object on your web page, the IFrame API posts content to an <iframe> tag on your page. This approach provides more flexibility than the previously available APIs since it allows YouTube to serve an HTML5 player rather than a Flash player for mobile devices that do not support Flash.
Flash API and JS API has already been deprecated. I'm not sure if it still work with the current API that is why I suggest you to use Iframe API
Here are some sources that may help you:
JS Fiddle Demo
embedding Flash
Related SO question
Hope this helps!
I checked the Youtube API v3 iframe embed docs and am trying to apply player.clearVideo() function to my button as follows (ellipsis replaces code) :
...
function onPlayerReady(event) {
var zapButton = document.getElementById('zapvideo');
zapButton.addEventListener("click", function() {
player.clearVideo(); // NOT WORKING
});
}
...
$(function(){
$('#zapvideo').on('click', function(){ ... });
});
Nothing happens (no errors). player.stopVideo() and other controls work. How can I clear the video from the Youtube player? I'm using Youtube's HTML5 player, but even when Youtube switches to Flash player for some videos, I still cannot clear the video that's in the player (what's worst is that Youtube doesn't revert to the HTML5 player when an HTML5 compatible video is subsequently selected and played in my app regardless if I have opt-in HTML5 or added the relevant html5 playerVars, which means I cannot tab out of Flash-based player controls when they're in focus. So much for "key-bored" navigation!). I'm using Firefox 36.0.1 .
Any suitable workaround function to clear video while keeping the player available will be fine with me.
Found a workaround with the following code:
...
function onPlayerReady(event) {
...
$('#zapvideo').on('click', function(){
$('#player').hide();
event.target.loadVideoById('',0);
event.target.seekTo(0); // iOS
event.target.stopVideo();
return false;
});
}
#zapvideo button hides the iframe player since we don't want to see any error message in player after an empty or dummy video id is submitted via event.target.loadVideoById(). Remember to show player before playing a new video. The relevant code is encapsulated within the onPlayerReady() function to make sure the player is always ready prior to code execution.
I happily use Reveal.js for presentation purposes, but now I want to create MOOCS using the fine script. I want to put an audio clip with each fragment, that starts playing when the fragment is shown. So far that works fine using the eventListener method to start and pause audio in my slideshow. However, given the nature of this method, the audio or video will continue when the next fragment is shown, as it is dependent on the status of 'fragmentshown' or 'fragmenthidden'. (see below)
Reveal.addEventListener( 'fragmentshown', function( event ) {
var audio = event.fragment.querySelector( 'audio' );
if( audio ) {
audio.play();
}});
Reveal.addEventListener( 'fragmenthidden', function( event ) {
var audio = event.fragment.querySelector( 'audio' );
if( audio ) {
audio.pause();
}});
Is there an easy way to extend this using the 'current-fragment' class that's added to the fragment that is current (duh), to pause (or better yet: stop) the audio when the class is passed on to the next fragment? I'm sure there is, but I'm a novice and would really appreciate a heads up here. It would be great for moocing purposes if this would be part of the code. I get lots of requests for it from teaching colleagues at our university.
To generate a MOOC you can use the audio-slideshow plugin that does the job for you. The plugin allows you to specify an audio file for each slide and fragment. Alternatively, it automatically checks if there is an audio file for the slide and fragment based on the reveal.js indices, e.g. for the second horizontal and first vertical slide ist checks whether there is a file audio/1.0.ogg.
You can also record the audio while presenting using the slideshow-recorder plugin or use text-to-speech.
You can find a demo here and the plugin here
Asvin
I'm trying to add music to a virtual tour application I'm writing in JS and jQuery and so far my code, shown below, works great in Chrome, FF, IE9, and Opera. But in Safari 5.1.7, which is the newest you can get for a Windows machine, it just doesn't work... Through my research of the problem, I know that Safari doesn't autoplay music and it has to be started manually, but when I click the play button, nothing happens. And, btw, the code inspector in Safari shows that my audio tag is there with the music sources so I don't think it has anything to do with the DOM. Any ideas on my problem?
HTML:
<div id="musicBtns">
<p>Music:</p>
<p id="musicPlayBtn">Play</p>
<p>/</p>
<p id="musicPauseBtn">Pause</p>
</div>
My music object in JS:
var Music =
{
musicBtns: $('#musicBtns'),
playBtn: $('#musicPlayBtn'),
pauseBtn: $('#musicPauseBtn'),
isPlaying: false,
init: function()
{
if(!music.includeMusic) // If the client didn't want any music in the tour app, remove the music btns from the DOM
{
this.musicBtns.remove();
}
else // Else, setup the audio element
{
var parent = this;
var audio = $('<audio loop="true">');
if(music.autoplay)
{
audio.attr('autoplay', 'autoplay');
this.isPlaying = true;
this.togglePlayPause();
}
// Add a source elements and appends them to the audio element
this.addSource(audio, music.ogg); // 'music.ogg' is a reference to the path in a JSON file
this.addSource(audio, music.mp3);
this.musicBtns.append(audio);
// Add event listeners for the play/pause btns
this.playBtn.click(function()
{
audio.trigger('play');
parent.isPlaying = true;
parent.togglePlayPause();
});
this.pauseBtn.click(function()
{
audio.trigger('pause');
parent.isPlaying = false;
parent.togglePlayPause();
});
}
},
addSource: function(el, path)
{
el.append($('<source>').attr('src', path));
},
// Add or remove classes depending on the state of play/pause
togglePlayPause: function()
{
if(this.isPlaying)
{
this.playBtn.addClass('underline');
this.pauseBtn.removeClass('underline');
}
else
{
this.playBtn.removeClass('underline');
this.pauseBtn.addClass('underline');
}
}
}
Edit: Could this be a bug in Safari?
So the problem turned out to be with QuickTime. I guess I must of deleted it off of my machine awhile back because I didn't think I needed it. After I re-installed QuickTime, Safari plays music using the audio tag with no problem. Autoplay even works too.
Kinda funny how the champion of native HTML5 audio/video support, doesn't support HTML5 audio/video without a plugin...
In HTML5 video on Safari I had an issue with this where I had to "load" (which, I think, either starts the buffer or loads the whole thing) before I set it to play. This seemed to actually make things work in a few webkit browsers. So something like:
var a = new Audio("file.mp3");
a.load();
a.play();
Worth a try