Trying find location of images for video player.

I am trying to create a video page.  I copied the html, css, and js from another agencies site so that I could add the CC function to the video.  The player works ( http://insurance.illinois.gov/videos/TestCC.html ), but I'm missing the icons.  I looked in the css and found...

.vjs-default-skin .vjs-volume-level {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5em;
  /* assuming volume starts at 1.0 */

  width: 100%;
  background: #66a8cc url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAP0lEQVQIHWWMAQoAIAgDR/QJ/Ub//04+w7ZICBwcOg5FZi5iBB82AGzixEglJrd4TVK5XUJpskSTEvpdFzX9AB2pGziSQcvAAAAAAElFTkSuQmCC) -50% 0 repeat;
}

Open in new window


Is there any way I can track down where the images are stored so that I can copy them following this data location code?  Once I get the images, how do I replace the above code to properly place the images?

Another option if would be if you know a really nice looking html video playing page that I can use which will utilize the vtt file for playing captions.
smitty62Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Brandon LyonSenior Frontend DeveloperCommented:
The icons are coming from what is referred to as an "icon font". The font family is named "VideoJS". The font file is not working according to the browser developer tools console.

"Failed to decode downloaded font: http://insurance.illinois.gov/videos/font/vjs.woff"
OTS parsing error: invalid version tag

Same for the ttf file.

When I try to manually navigate to the URL of the font file I get a 404 page not found.

I believe the videojs font can be downloaded from github. You only need the font files.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Brandon LyonSenior Frontend DeveloperCommented:
PS: In the code sample you provided the image is encoded in the CSS file. It's referred to as "Base64" or "Data URI". There are base 64 encoders and decoders available online. Any file can be made into a text string and embedded in the CSS file.

https://css-tricks.com/data-uris/
0
smitty62Author Commented:
Here is the page link...  http://insurance.illinois.gov/videos/NewVideoPage.html

I was able to download video-js.css, video.js, vjs.eot, vjs.svg, vjs.ttf, vjs.woff, however, I still cannot get the images to show up.  Here is the link I currently have posted, but it's to another agency.  I'm trying to bring over and get all the files to work on our server.

http://multimedia.illinois.gov/ins/ins-parity.html

Any ideas how I can resolve this?
0
smitty62Author Commented:
Got it! I finally figured it out and replaced the string with a created .png file.  Thank you for your help.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.