How to link my function changeVideoSource to my video tag? I retrieve video data from mySQL and I want to display the video, I am using Java Spring Boot.
<body>
<div class="jumbotron col-xs-12" th:each="film: ${films}">
<p th:text="${film.titre}"/>
<video id="video" width="200" height="200" th:onloadstart="changeVideoSource(${film.filmvideo}, this.id)" controls>
</video>
</div>
</body>
<script type="text/javascript">
function changeVideoSource(blob, videoElement)
{
var blobUrl = URL.createObjectURL(blob);
console.log(Changing video source to blob URL "${blobUrl}");
videoElement.src = blobUrl;
videoElement.play();
}
</script>
Try this modification:
<div class="jumbotron col-xs-12" th:each="film: ${films}">
<p th:text="${film.titre}" />
<video id="myVideoTag" width="200" height="200" controls> </video>
</body>
<script type="text/javascript">
///# setup the vars
var myVid = document.getElementById( "myVideoTag" );
var myBlob = ${film.filmvideo};
//# run the function
myFunc( myBlob, myVid )
function myFunc( videoElement)
{
console.log( "videoElement is : " + videoElement );
var blobUrl = (window.URL || window.webkitURL).createObjectURL(blob);
console.log(Changing video source to blob URL "${blobUrl}");
videoElement.src = blobUrl;
videoElement.play();
}
</script>
Related
I wrote an app for Video Player using video.js, but its not playing when I clicked on play.
I tried to inspect on the browser and I saw this error:
Uncaught TypeError: The element or ID supplied is not valid. (videojs)
at videojs (video.js:21689)
Then when I checked (video.js:21689) I have this:
if (!tag || !tag.nodeName) {
// re: nodeName, could be a box div also
throw new TypeError('The element or ID supplied is not valid. (videojs)'); // Returns
}
<link href="https://vjs.zencdn.net/5.10.2/video-js.css" rel="stylesheet">
#if(strstr($media->mime_type, "video/"))
<div oncontextmenu=”return false;”>
<video controls controlsList="nodownload" id="videoElementID" playsinline>
<source src="{{str_replace('http://localhost:8000','http://example.com/public',$media->getUrl())}}" type="video/mp4" >
</video>
</div>
#elseif(strstr($media->mime_type, "audio/"))
<div style="magin:0 auto;">
<audio controls controlsList="nodownload" style="width:100%;">
<source src="{{str_replace('http://localhost:8000','http://example.com/public',$media->getUrl())}}" type="audio/mp3">
</audio>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://vjs.zencdn.net/5.10.2/video.js"></script>
<script src="//cdn.sc.gl/videojs-hotkeys/0.2/videojs.hotkeys.min.js"></script>
<script type="text/javascript">
const player = videojs('vid1', {});
document.addEventListener('contextmenu', event => event.preventDefault());
function takeTest() {
$('.lectureArea').hide();
$('.testMarker').hide();
$('.testArea').show();
}
$(document).ready(function(){
$('#videoElementID').bind('contextmenu',function() { return false; });
});
</script>
I expect the video to play when I clicked but not happen
you need to pass video control id
const player = videojs('videoElementID', {});
I am trying to add math formula in ckeditor, from editor should collect entire information(including formula) display on the same page in different div.
When I do with the following approach it is displaying math formula as text(not formatting as formula).
<html>
<head>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>
<script>
function onSubmit(){
var data = CKEDITOR.instances.editor1.getData()
document.getElementById("show").innerHTML=data
}
</script>
</head>
<body>
<form action="#" >
<textarea rows="20" cols="70" class="ckeditor" id="editor1" name="test1">
</textarea>
<input type="button" value="save" onclick="onSubmit()" >
</form>
<div id="show" id='ed2'></div>
<script>
CKEDITOR.replace( 'editor1', {
extraPlugins: 'mathjax',
mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML',
height: 320
} );
if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 ) {
document.getElementById( 'ie8-warning' ).className = 'tip alert';
}
</script>
</body>
</html>
It is faster and easier to use Katex rather than Mathjax for math formula rendering in Html.
For reference(Comparison between katex and latex ) :
https://www.intmath.com/cg5/katex-mathjax-comparison.php
So the solution by using katex will be :
<!DOCTYPE html>
<head>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH"
crossorigin="anonymous"></script>
<script>
function onSubmit() {
var data = CKEDITOR.instances.editor1.getData()
document.getElementById("show").innerHTML = data
domChanged();
}
</script>
</head>
<body>
<form action="#">
<textarea rows="20" cols="70" class="ckeditor" id="editor1" name="test1">
</textarea>
<input type="button" value="save" onclick="onSubmit()">
</form>
<div id="show" id='ed2'></div>
<script>
CKEDITOR.replace('editor1', {
extraPlugins: 'mathjax',
mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML',
height: 320
});
if (CKEDITOR.env.ie && CKEDITOR.env.version == 8) {
document.getElementById('ie8-warning').className = 'tip alert';
}
function domChanged() {
renderMathInElement(document.body);
}
</script>
</body>
</html>
Good luck !!!
http://jsfiddle.net/KFEAC/2/
I'd like to learn how to add a image from my hard drive into an HTML5 canvas. I don't wanna upload it, just load it from my hard drive dynamically from a browse window after a button is clicked.
I do believe this is possible without PHP.
Can anyone help?
HTML:
<input type="file" id="openimg"> <input type="button" id="load" value="Load" style="width:100px;"><br/>
Width and Height (px): <input type="text" id="width" style="width:100px;">, <input type="text" id="height" style="width:100px;"><br/>
<canvas id="myimg" width="300" height="300"></canvas>
JavaScript/JQuery:
$(function(){
$("canvas#myimg").draggable();
var canvas = document.getElementById("myimg");
var context = canvas.getContext("2d");
function draw() {
var chosenimg = $("#openimg").val();
var w = parseInt($("#width").val());
var h = parseInt($("#height").val());
canvas.width = w;
canvas.height = h;
var img = new Image();
img.onload = function () {
context.drawImage(img,0,0,img.width,img.height,0,0,w,h);
}
img.src = $("#openimg").val();}
$("#width").val(150);
$("#height").val(150);
$("#load").click(function(){ draw(); });
});
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas = document.getElementById("myimg");
var context = canvas.getContext("2d");
function draw() {
var chosenimg = $("#openimg").val();
var w = parseInt($("#width").val());
var h = parseInt($("#height").val());
canvas.width = w;
canvas.height = h;
var img = new Image();
img.onload = function () {
context.drawImage(img,0,0,img.width,img.height,0,0,w,h);
console.log(img.src);
}
img.src = $("#openimg").val();
}
$("#width").val(150);
$("#height").val(150);
$("#load").click(function(){ draw(); });
}); // end $(function(){});
</script>
</head>
<body>
<input type="file" id="openimg">
<input type="button" id="load" value="Load" style="width:100px;"><br/>
Width and Height (px):
<input type="text" id="width" style="width:100px;">,
<input type="text" id="height" style="width:100px;"><br/>
<canvas id="myimg" width="300" height="300"></canvas>
</body>
</html>
I'm creating an image gallery using BxSlider (http://bxslider.com) and would like to center the image both horizontally and vertically in the viewport. I am also using a resizing script so don't know the dimensions of my images.
I have tried all kinds of scripts that I've found through Google but nothing seems to be working.
This is my html:
<div id="myDiv">
<div><img src="" /></div>
<div><img src="" /></div>
<div><img src="" /></div>
</div>
My BxSlider code:
<script src="https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myDiv').bxSlider({
mode: 'fade',
captions: true,
});
});
</script>
And my resizing code:
function resizeImg() {
var h = $(window).height();
if (840 > h) {
var bw = h - 210;
$('img').attr('height',bw);
//alert('Height: '+h);
// post-container-image
}
}
jQuery(document).ready(function(){
var h = $(window).height();
if (840 > h) {
resizeImg();
}
});
$(window).resize(function(){
var h = $(window).height();
if (840 > h) {
resizeImg();
}
});
My first script provides to random image as you can see below
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
var $t = jQuery.noConflict();
$t(function () {
$t('.slideshow').cycle({
fx: 'fade'
});
});
</script>
It works when I add some images like that
<div class="news_area_left">
<div class="slideshow" style="position: relative; ">
<img src="../../banner_image/nemo.jpg" width="154px" height="108px"/>
<img src="../../banner_image/up.jpg" width="154px" height="108px" />
</div>
</div>
But when I add my second script which get images as you can see
<script type="text/javascript">
$(function () {
$.ajax({
type: "get", url: "Home/Oku", data: {}, dataType: "json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var newFirmDiv= $(' <img src="../../banner_image/' + data[i] + '" width="154px" height="108px"/>');
$(".slideshow").append(newFirmDiv);
}
}
});
});
</script>
Finally I try to use my dynamic images in my "slideshow div" but the effect does not work
<div class="news_area_left">
<div class="slideshow" style="position: relative; ">
</div>
</div>
You need to run $t('.slideshow').cycle after you have dynamically inserted your images. Also you need to append to the "slideshow" class and not the "firmShowCase" class.
See this jsFiddle I've created http://jsfiddle.net/davew9999/sgUeq/
HTML
<div class="news_area_left">
<div class="slideshow" style="position: relative; ">
<img src="http://activephilosophy.files.wordpress.com/2009/09/number1.jpg" width="154px" height="108px"/>
<img src="http://www.clker.com/cliparts/h/Y/i/C/Y/W/red-rounded-square-with-number-2-md.png" width="154px" height="108px"/>
</div>
</div>
JavaScript
var $t = jQuery.noConflict();
var newFirmDiv = $t('<img src="http://www.mosamuse.com/wp-content/uploads/2012/05/number3.png" width="154px" height="108px"/>');
$t(".slideshow").append(newFirmDiv);
var anotherDiv = $t('<img src="http://2.bp.blogspot.com/-_A_8UYb0zIQ/Te5lpI9iZ3I/AAAAAAABgWk/sErDyHjEhPw/s1600/number-4.jpg" width="154px" height="108px"/>');
$t(".slideshow").append(anotherDiv);
$t(function() {
$t('.slideshow').cycle({
fx: 'fade'
});
});