I want to add a horizontal element that will be showing over controls. The area I need to create an element in:
I don't orient in videojs CSS really well... I will be very thankful for your help. Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Volume Volume Level</title>
<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet" />
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
</head>
<body>
<video
id="my-player"
class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered"
>
<source
src="//jsoncompare.org/LearningContainer/SampleFiles/Video/MP4/Sample-MP4-Video-File-for-Testing.mp4"
type="video/mp4"
/>
</video>
<script>
videojs("my-player", {
playbackRates: [0.5, 1, 1.25, 1.5, 2],
controls: true
});
</script>
</body>
</html>
Related
Upon clicking the refresh button a random video from "Folder" should appear. This works well until I decide to integrate CSS via <link rel="stylesheet" href="site.css" /> (The HTML file is site.html). Only a gray box appears and when inspecting it does show the source to be an mp4 file from "Folder" but does not show. Removing the CSS link allows it to work again.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="site.css" />
</head>
<body>
<header>
<h1>Generator</h1>
</header>
<main>
<section>
<article>
<video height="800px" controls >
<source id="vsrc" />
</video>
<script>
document.getElementById("vsrc").src = "./Folder/" + Math.floor((Math.random()*266)+ 1) + ".mp4";
</script>
</article>
<article>
<p><input type="button" value="Refresh" onClick="refresh(this)"></p>
<script>
function refresh(){
window.location.reload("Refresh")
}
</script>
</article>
</section>
</main>
</body>
</html>
I'm trying to integrate adocean into my Html5 video player to play ads. Here is my code which I wrote from adocean official documentation.I'm getting xml link from ado object. This XML contains the video SRC (campaign creative, which was created from admin panel), but weirdly I couldn't find a way to play the ad. Any ideas? I have also a Cross-Origin warning message in the console.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ado</title>
<script type="text/javascript" src="//port80ge.adocean.pl/files/js/ado.js">
</script>
<script type="text/javascript" >
/* (c)AdOcean 2003-2020 */
if(typeof ado!=="object"){ado={};ado.config=ado.preview=ado.placement=ado.master=ado.slave=function(){};}
ado.config({mode: "new", xml: false, consent: true, characterEncoding: false});
console.log("ado",ado)
ado.preview({enabled: true});
</script>
</head>
<body>
<video
id="pSw7GgCkOHRk9cOQs7QRtqsYodMzuEdaWtPajlcRyjf.y7"
playsinline
class="op-player__media"
autoplay
width="320"
height="240"
controls
>
<source src="./assets/Arya Kills The Night King (Alternative Version).mp4" />
</video>
<script type="text/javascript">
ado.master({id: 'pSw7GgCkOHRk9cOQs7QRtqsYodMzuEdaWtPajlcRyjf.y7', crossOrigin:"" ,contentType:'xml', server: 'port80ge.adocean.pl' });
console.log("adoo = ", ado);
</script>
</body>
</html>
On a very simple webpage I have a video in the background autoplaying and some jquery script to load html content in a div. Strangely enough he javascript function on the links only executes after 12 seconds or so. I think it has to do with the video load as when i replace the video with an image it works properly. Any help appreciated towards solving this. Thanks.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Breathing Room</title>
<style>
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="navigation">
<ul>
<li>Abstract</li>
<li>CHI2018</li>
<li>Team</li>
<li>Links</li>
</ul>
</div>
<div class="content" id="content">
Start text here.
</div>
<div class="video-bg">
<video autoplay loop muted poster="_images/background.jpg">
<source src="_images/video.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
and javascript:
$(document).ready( function() {
console.log( "ready!" );
$("#abstract").on("click", function() {
$("#content").load("../pages/abstract.html");
});
});
Instead of add autoplay to video tag. You can put video play in $(document).ready
<video loop muted poster="_images/background.jpg">
<source src="_images/video.mp4" type="video/mp4">
</video>
$(document).ready( function() {
document.getElementByTag('video').play();
$("#abstract").on("click", function() {
$("#content").load("../pages/abstract.html");
});
});
Hope this help
So I have a website, which I just use for fun, but I currently have a problem with the website (uppah.net)
I'm simply trying to play a video on the website, but it doesn't show up on Chrome. It works fine on Microsoft Edge and Internet Explorer.
I've read that Google Chrome doesn't support MP4, so I tried to change the video formats into WebM, but with the same result.
I'm using the following code:
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Uppah</title>
<link href="style.css" rel="stylesheet" />
<link href="FCNTiGM.gif" rel="shortcut icon" />
<script>
function load() {
document.getElementById("vsrc").src = Math.floor((Math.random()*11)+1)+".mp4";
}
</script>
</head>
<body onload="load()">
<div id="wrapper">
<video autoplay class="video" loop><source id="vsrc" /> Please update your browser.</video>
</div>
<div id="polina">
<h1>Uppah</h1>
<p>Steam Profile</p>
<p>You won't find any hacks here, noob. :^) </p>
</div>
</body>
</html>
I've tried to change:
<script>
function load() {
document.getElementById("vsrc").src = Math.floor((Math.random()*11)+1)+".mp4";
}
</script>
Into
<script>
function load() {
document.getElementById("vsrc").src = Math.floor((Math.random()*11)+1)+".webm";
}
</script>
But it doesn't play.
Why don't you append to the wrapper div the whole video element like this
function load() {
var src = Math.floor((Math.random()*11)+1)+".mp4";
var wrapper = document.getElementById("wrapper");
wrapper.innerHTML = '<video autoplay class="video" id="video" loop><source src="'+src+'" type="video/mp4" /> Please update your browser.</video>';
}
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Uppah</title>
<link href="style.css" rel="stylesheet" />
<link href="FCNTiGM.gif" rel="shortcut icon" />
</head>
<body onload="load()">
<div id="wrapper">
</div>
<div id="polina">
<h1>Uppah</h1>
<p>Steam Profile</p>
<p>You won't find any hacks here, noob. :^) </p>
</div>
</body>
</html>
Here is a working example (just hit "Run with JS" button in the output section): http://jsbin.com/kabibifoqo/edit?html,js,output
i am trying to play local video files already added in my project path : ASSETS/WWW/VIDEOS/xyz.mp4 now using tag but getting alert:
i have added code in HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div data-role="page" data-theme="a" class="my-page" id="video">
<video id="video_player" src="#" controls="controls"></video>
</div>
</body>
</html>
**in js:**
$(document).on('pagebeforeshow',"#video", function () {
xyz = document.getElementById('video_player');
alert("values xyz:" + xyz);
xyz.src = data[curYear].video.url;
alert("xyz after src:" + xyz.src);
xyz.play();
});
Try this..
<video class="video" poster="/assets/video/posters/example.jpg" controls width="768" height="432" preload="none">
<source src="/assets/video/example.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/assets/video/example.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>