jQuery multimedia embedding out of sync - javascript

I am working on a company web page and we have the need to embed some video information for our clients. These videos will be tutorials on how to use our products.
There are 3 issues that I'm having with this web page
1. Resizing the borders of the window will cause the background to flicker.
2. When a video is playing, the user is able to click the drop down box and select a new video which loads, but the audio from the original remains playing.
3. I've also noticed that these videos take some time to load. The videos are around 40 megs in size but the same videos play instantly when loaded directly from our server and not played through a web browser (which attepts to embed the very same videos)
Here are our hardware specifications:
Browser: Internet Explorer 8 (We cannot upgrade to 9 for a while still married to 8 for now.)
Server: Ibm i5 520
The work stations are all x86 machines wired directly into our server via ethernet cable.
I'm new to jQuery and mostly program in C++ so this stateless programming has been a headache.
I've hosted the file below.
http://pastebin.com/bdFqX6xd
Thanks in advance.

This is a great place to start with html video:
http://videojs.com/
Great piece of js to get videos imbedded and also has good instructions.

Related

Flash fallback for jplayer won't work in chrome because "Invisible [Flash] content is always blocked."

So I have to use the Flash fallback for Jplayer when the user is using Google Chrome because of the way our audio streaming server is set up (HTML5 just doesn't play nicely with our Streaming Audio Icecast server for some reason, live streams are fine but static mp3s are not). All other browsers are fine!
However, it keeps blocking the player even if the site is selected to always play the flash plugin, and now it's printing this error in the console: "Same-origin plugin content from http://kansaspublicradio.org/widgets/audio-popup/jplayer/Jplayer.swf must have a visible size larger than 6 x 6 pixels, or it will be blocked. Invisible content is always blocked."
What's the best/easiest way to make the Flash player not be invisible?
Jplayer uses HTML elements for the controls. It's not like your typical Flash game or animation or anything, the Flash part is just used to play audio (when HTML5 isn't being uses).
Thanks for any help! I'm also aware that Flash is going away in a few years, hopefully we have a more ideal solution figured out by then.
Open jquery.jplayer.js or jquery.jplayer.min.js and find setAttribute("width". Here you can adjust the width and height of the loaded player. Setting this to something above 6x6 should fix your issue.
Unfortunately the official jPlayer project is no longer maintained and pull requests are ignored, so you'll have to do this manually.

YouTube stream show subtitles below 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

HTML videos preloading

We are developing Interactive 2d games, we use the HTML5 videos to show segments with heavy animations,as you may know we are using a lot of resources like images, svgs , since these resources are preloaded once you open the game so they are working great.
but we noticed that when we try to open a video it take a time to play until it is loaded.
Is their a way to preload a 10 videos (for example) once the user opens our website?
There are many libraries that help to prevent those long loadings on videos or audio in html.
Personally my favourite is Media Element.js
http://mediaelementjs.com/
To install, follow the instructions on the website and on the document README.

Youtube Player API Difference (Chromeless vs IFrame) - Which is better?

So I have scoured the web on information on how to embed the Youtube players but actual detailed tutorials seem extremely sparse or completely non existent. In addition, although there is documentation found on the google site
it seems to be somewhat confusing for a novice on how to implement either which leads me to my question. It seems that there are two players, the IFrame player and the Chromeless player which uses an swf embed. I have gone ahead and provided examples of both:
IFrame Player(using angular): http://plnkr.co/edit/H5VnlPhOaa2n6ZsfSj5p?p=preview
Chromeless Player: http://plnkr.co/edit/Epz9uXDZ1uIiV4lgB0vw?p=preview
My question is, what is the difference? What is the advantage of using one over the other? Does one have more backwards compatibility with browsers? Mobile Support? The Chromeless player seems to require less code to run as most of the code runs out of the box from the included "swfobject.js".In addition it seems that the chromeless player does not work on iOS devices due to the flash requirement. Is this correct?
Addendum: You can see the iframe and chromeless player are mostly the same besides the fact that you can click on the iframe youtube player to pause it while the chromeless player can only be controlled from the play/pause controls.
One big benefit to using iFrames with Youtube is that it is basically a new window with a call back to youtube... and guess what? Youtube will interpret what browser and platform the request is coming from and populate the appropriate content BUT iFrame can be slow loading on older browsers and on mobile devices where object/embed would not. Parameter settings (to tune the user experience on your site) is roughly the same. We all know SWF files won't work on iOS so you might need to factor that into your development for your userbase.

Samsung SmartTV ovelray (news ticker) application

Is there any way the application can run as an overlay (ticker) over the DVB program (i.e. live broadcast)?
Currently the only working solution to display application as an overlay over part of the screen, we are aware of, is to start the application from TV SmartHub menu and display the overlay over the IP (usually HLS) stream.
See for example here (http://en.wikipedia.org/wiki/File:CNBC_Closing_Bell.jpg) the CNBS ticker. We would like to develop the application like this... to display additional info over the DVB (or other) broadcast.
Regards,
STeN
If you want to run application in a SmartHub and use TV source as a background of application this should help you:
For the method:
http://www.samsungdforum.com/Guide/View/Developer_Documentation/Samsung_SmartTV_Developer_Documentation_2.5/API_Reference/JavaScript_APIs/Device_API/Window/SetSource
And for enumeration of sources:
http://www.samsungdforum.com/Guide/View/Developer_Documentation/Samsung_SmartTV_Developer_Documentation_2.5/API_Reference/JavaScript_APIs/Device_API/Window/SetSource
It is only my guess because I have never needed to play TV in background - always used the PL_WINDOW_SOURCE_MEDIA as I'm working on Internet video streaming.
Remember that you need to have transparent background in your application CSS, because video in Samsung plays always under the background.
Hope It help!

Categories

Resources