• Status: Solved
  • Priority: Medium
  • Security: Private
  • Views: 42
  • Last Modified:

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.
0
smitty62
Asked:
smitty62
  • 2
  • 2
1 Solution
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now