I want to set up v3 of Ooayla's api and use html 5 videos. So far I've followed the instructions here and I've added to the players js script to include the parameters to force html video. The video won't show on chrome for android 4.4 and on desktop it reverts to flash. If I say html only then it doesn't show up at all on either devices.
Here's my header code
<script src='https://player.ooyala.com/v3/MWI3YjYwYTBiZjg1ZWE0ZTYyZWViM2Ew?platform=html5-priority'></script>
My javascript code
//topVideo.field_ooyala_upload is the variable for the video id.
OO.ready(function() {
window.player = OO.Player.create(
'playerwrapper',
topVideo.field_ooyala_upload, {
// add the embedded player parameters here
autoplay: false
}
);
});
Not sure why I can't get HTML5 videos to show up. Any help would be great.
To stream using HTML5 V3 Player you have to add the ULR query param as you have done correctly.
Note that this will stream using progressive download on both desktop and Android and as such this encoding must be enabled in your account.
If you want to try HLS streaming, and have that encoding enabled, for Android you have to enable an additional query string parameter described here.
If you have a more complete sample of your code, please share it for further comments.
Related
Now playing midi in html is supported with javascript and windows media player/quicktime browser plugins.
I'm wondering if there are any news about html5 is going to support playing midi with audio tag in the future ?
If you want to play midi files, you can see how they did it here:
http://mudcu.be/midi-js/.
The example page makes use of MIDI.js. Note that it even uses soundfonts, all via scripting. Pretty neat.
If you're more interested in controlling midi devices, or having midi devices control your HTML5 page: the W3C guys are working on that. See the draft api description here
With html-midi-player, it is possible to embed a MIDI file in a website simply by inserting a midi-player element (a custom HTML element which works a lot like the audio element, but for MIDI files):
<midi-player src="jazz.mid" sound-font></midi-player>
Complete demo:
<midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player#2b12128/jazz.mid" sound-font>
</midi-player>
<!-- The following needs to be inserted somewhere on the page for the player(s) to work. -->
<script src="https://cdn.jsdelivr.net/combine/npm/tone#14.7.58,npm/#magenta/music#1.22.1/es6/core.js,npm/focus-visible#5,npm/html-midi-player#1.4.0"></script>
Full disclosure: I'm the author of html-midi-player.
I am have been playing around with a lot of options. popcorn.js, mediaelement.js, jwplayer and I can not find a combination that works. I'm working on a learning website and I need to display the subtitles of the video below the player. I can get it to work all good when the video is hosted on the server and it has a file link. I was using MediaElement.js because all the videos I need are on YouTube so it needs to stream from there.
I have tried a few different combinations and popcorn was originally going to work. When I started playing with it I found their YouTube streaming no longer works. I've followed their examples but its a no-go. Also with popcorn I couldn't get to work with any other subtitle file other than TTML (even though they support the others) and I need one that can have html inside of it.
My latest endeavor got me using the script from here: http://www.storiesinflight.com/js_videosub/#code
This lets me use .srt which is good, but I can't get it to let me stream YouTube with any other JavaScript players so I'm back to where I started.
I have seen a post about going through one of the transcoding websites and using the .mp4 link, but I don't want to rely on a middleman. If that site shuts down then my site will also be screwed. I doubt YouTube is going anywhere anytime soon.
There's a surefire way to do this and that's to create your subtitles in notepad and then upload them to youtube
Then Go to your Account Settings page in Youtube
Select Playback from the left-hand menu
Select/check 'Always show captions'
You should Check Show automatic captions by speech recognition (when available) to enable automatic captions for videos that don't already have captions provided)
Save! and you're done
No javascript required
I am attempt to understand the logic behind whatever trips the 'blocking' mechanism for YouTube's video playback.
Here I am attempt to play back a song which is blocked from embedded playback inside of a JS Fiddle. Observe that it works:
http://jsfiddle.net/E7B9C/17/
Now, I use the exact same code inside of my Google Chrome extension:
http://www.meomixes.com/ if you'd like to click to download extension.
http://www.meomixes.com/Test.crx for direct link to extension.
Observe that I cannot playback the same youtube video:
I was wondering what my debugging options were for this scenario. Does anyone have any ideas on what I should explore? I've tried requesting the following permissions in my manifest, but it did not have any effect:
"permissions": [
"http://*.youtube.com",
"https://*.youtube.com",
"http://*.google.com",
"https://*.google.com"
]
I've placed the full source of Test.crx here: http://www.meomixes.com/Test.zip
To load:
Unzip
Go to Google Chrome's extension page and enable 'Developer Mode'
Click 'Load Unpacked Extension' and point to the unzipped directory.
Observe that the video does not play back.
Last of note: The song plays happily in a Facebook post.
EDIT: I found this: http://gdata.youtube.com/feeds/api/videos/UfESt2KdOdc?v=2&prettyprint=true for the video in question. It pairs with: http://apiblog.youtube.com/2011/12/understanding-playback-restrictions.html.
Just building on the first response. Basically, there is a setting called 'syndication' which prevents from playing on 'external devices' such as TVs and Google Chrome Extensions.
Looking at ways to bypass this issue now.
The Youtube iframe implementation seems to block certain referring urls from displaying licensed content.
The Problem
These referring schemas didn't seem to work with the particular video you're testing with.
chrome-extension://
file://
It seems like content licenser, UMG, opted to prevent any plays from extensions or local files. An alternative is to avoid using videos that contain licensed content, but that's boring.
It's inconvenient but there is a workaround that will allow you to implement the iframe player into the extension. All Youtube cares about is that the the player is embedded on a page somewhere on the internet.
Proxy Page
Try replacing the iframe src in popup.htm with the jsfiddle result frame from your example and reload your plugin.
<iframe width="200" height="200" src="http://fiddle.jshell.net/E7B9C/17/show/"></iframe>
You should see the previously "unavailable" video playing now. Your extension now references a page you control on jshell.net. All Youtube knows is that you're calling their player from jshell.net.
Controls
Now that we have a player, you may notice that you don't have any of the Youtube controls available to you since you're now referencing your own iframe that's referencing the Youtube iframe and it's API. As if it weren't fun enough already, you now get to make your own iframe API to communicate from the chrome-extension to your iframe to Youtube's iframe!
Under normal circumstances a parent can set the child frame's window.location.hash and that frame watches and parses any changes that come through. The child then calls some callback in the parent directly with some new information.
Edit: Instead of using window.location.hash, you could use HTML5's window.postMessage() instead and avoid having to deal with checking and parsing the hash continuously.
That should get you up and running.
I've successfully integrated Flowplayer into my Drupal installation using the video and flowplayer. I upgraded flowplayer files to the latest release 3.2.7 and all works ok, but not on iPad - iPod Touch.
I loaded the js for the iPad plugin in the Flowplayer module like this:
drupal_add_js(drupal_get_path('module', 'flowplayer') . '/flowplayer/example/flowplayer.ipad-3.2.2.js');
and I see that it is loaded fine.
then in Flowplayer js I had this line
$(selector + ':not(.flowplayer-processed)').addClass('flowplayer-processed').flowplayer(settings.basePath + settings.flowplayerSwf, config);
I changed this in this way:
//I added the first line because in the example it worked that way
$(selector + ':not(.flowplayer-processed)').attr('url', config.clip.url);
$(selector + ':not(.flowplayer-processed)').addClass('flowplayer-processed').flowplayer(settings.basePath + settings.flowplayerSwf, config);
//then i add ipad support (the selctor is hardcoded to maike things work)
$f('flowplayer-video').ipad();
In this way, on my iPod touch (I think it's the same on iPad) I see the player but the video doesn't start (there is some kind of blocked overlay).
You can look at the site here
EDIT - now i got it working thanks to teddy suggestion. now i'll try to find out how to setup my script so that it returns byte-range headers.
If anyone knows how to do this, please post here.
The server that serves the actual MP4 video to the iPad must support the HTTP header called byte-range.
I would try using an alternate video source from another server, as a proof-of-concept to see if this is the cause of the problem.
Here is an MP4 video served with the byte-range header: http://mediaelementjs.com/media/echo-hereweare.mp4
Is there any way to control YouTube EMBED CODE. For example I am using YouTube embed code in my site. Is there any way to control the video like forward, backward, stop etc. with my own buttons.
Is this possible?
Any help will be appreciated.. Thanks in Advance.
Fero
YouTube has a JavaScript and Flash API that you can use to build your own player or control the player programmatically.
The documentation is here: http://code.google.com/apis/youtube/overview.html
There are several examples in the documentation for controlling your own "chromeless" player. This is probably what you want to use if you want your own buttons.
All of the major browser-embedded video player types have ways to do this, but the method is different for all of them.
YouTube uses a Flash player, which poses a special problem: Flash video players have no ability to handle external JavaScript calls other than what is specifically added by the programmer that built the player. That is, if YouTube didn't build their player with support for external scriptability, you can't script it. This isn't a flag -- on/off -- it's that Flash makes you explicitly publish an external scripting API, and you have to know what the calls look like to make the player do what you want. This is unlike, say, QuickTime, Windows Media Player, or the new HTML 5 <video> tag, all of which have documented basic playback control like you're asking about.
It's probably possible to build your own FLV player (or buy one, like the popular JW Player, which does have a JavaScript API) and point it at the actual video file served by YouTube. I don't know if they try to obscure the video file URL, but once you find out what it is, you're golden.