I was testing a basic track html page from my desktop, and it seems that that the closed captioning works in Firefox and IE, but not Edge or Chrome. Edge shows the CC button and that it's running, but doesn't display any text, while Chrome doesn't even show CC button for me. From a website, they all work except Edge again. Ideas?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>CC Track Test</title>
</head>
<body>
<video controls src="movie.mp4">
<track default kind="subtitles" label="caption" srclang="en" src="entrack.vtt" />
Sorry, your browser doesn't support embedded videos.
</video>
</body>
</html>
VTT:
WEBVTT
0
00:00:02.000 --> 00:00:14.000
This is a test caption.
1
00:00:18.700 --> 00:00:28.500
And this is a second test caption.
Related
I am trying to recreate a player that is shown here - https://videojs-http-streaming.netlify.app/
As per the docs, here is my HTML. But quality/resolution control is missing
What needs to be changed in this HTML for that quality/resolution picker to render in the player as shown in the demo page.
<html>
<head>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
<video-js id=example-video-hls class="vjs-default-skin" controls>
<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
type="application/x-mpegURL">
</video-js>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-quality-levels#2.1.0/dist/videojs-contrib-quality-levels.js"></script>
<script>
var player = videojs('example-video-hls');
player.play();
</script>
</body>
</html>
videojs-contrib-quality-levels adds the quality selector API, but does not include a UI component.
That example is using videojs-http-source-selector for the menu.
I am aiming to build a google chrome extension that displays a different link to a different website every time it is used.
That is, I have a list of websites and I want to iterate through the list such that each time I click the extension the next link is shown.
Currently my popup.html file looks like this
<!DOCTYPE html>
<html>
<head>
<title>My First Chrome Extension</title>
<style>
#popup{
width:300px;
height:200px;
text-align:center;
line-height:200px;
}
</style>
<script src="popup.js"></script>
</head>
<body>
<div id="popup">
next link
</div>
</body>
</html>
(the popup.js file is empty). When I click my extension icon, it will display a link to "some_url.com" which opens in a new tab (great). What I am looking for is to be able to then display "another link" when I click the extension icon again ("another link" being the next from some predefined list).
I would be very grateful for help/resources to be able to add this behaviour to the extension. I am new to chrome extensions (and javascript) and don't know where to go next.
You can create a anchor tag with some id on popup.html page
<a id="show-links" target="_blank"></a>
Then in your popup.js file, add a hfref attribute to this element using javascript
var a = document.getElementById('show-links');
//create an array with all links
links_array = ["some_link.com", "some_link1.com", "some_link2.com"];
//assign links to a from array at random
a.href = links_array[Math.floor(Math.random() * links_array.length)];
I want to add a clock icon in the browser tab (🕘) through some html/css code. Not as a favicon, but as 'text'
So for example before the word 'Do' without changing the Stackoverflow favicon
Is this supported by browsers? If yes, how would this look like in code?
Type this into console:
document.getElementsByTagName("title")[0].innerHTML = "🕘"
Its is the <title> element that governs the tab title in browsers.
<!DOCTYPE html>
<html>
<head>
<title>🕘 Title with clock symbol.</title>
</head>
<body>
The content of the document......
</body>
</html>
So I have an extremely simple popup for a chrome extension that has a single button in the html.
<!DOCTYPE html>
<html>
<head>
<title>Extension popup</title>
</head>
<body>
<button id="dashboard">Button<button>
</body>
</html>
So it is only supposed to show one button but a second empty button is also shown. Inspecting the popup shows that there is indeed another button.
I am mostly wondering whether anyone knows what is going on here?
here is my problem:
http://img687.imageshack.us/img687/5391/88030081.gif
here is my simple page:
<html>
<head>
</head>
<body>
URL fixing provided by none
</body>
</html>
what do I need to do?
I see other extensions with width and height set to just fine, and i only enter some little text and I get linebreak,
this is the only thing I get stucked in developing my extension- this is just an example of what happens
Try:
body {min-width:300px;min-height:300px;}