I am using Testcafe for my project tests and I am generating a HTML report with screenshot and video in my project.
When I am trying to publish the report using HTML publisher, the video is not playing.
When I open the generated HTML file in the Jenkins agent via browser, the video is playing fine. not sure, why it is not playing on the Jenkins HTML publisher plugin.
MY HTML video code looks like below
<div class="row">
<div class="column">
<img id="myImg" class="errImage" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAABAAAA" style="width:100%;">
</div>
<div class="column">
<video autoplay muted loop controls id="errorVideo" style="width:99%">
<source src="C:\Program Files (x86)\Jenkins\workspace\Free style node test\e2e\artifacts\videos\Getting Started\My First Test\1.mp4" type="video/mp4">
</video>
</div>
</div>
I tried configuring following content security policy
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "sandbox; default-src '';")
not sure what policy is blocking the video from playing on the Jenkins publisher.
Can someone help to resolve this issue? Thanks in advance.
The policy which blocking your video from playing is media-src == "none", derived from default-src == 'none' (see https://wiki.jenkins.io/display/JENKINS/Configuring+Content+Security+Policy)
Take a look at the solution in https://github.com/jenkinsci/screenrecorder-plugin/blob/master/src/main/java/org/jenkinsci/plugins/screenrecorder/ScreenRecorderBuildWrapper.java, it could work for you:
String curCsp = System.getProperty("hudson.model.DirectoryBrowserSupport.CSP","");
if (!curCsp.contains("media-src"))
{
System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", curCsp + ";media-src 'self';");
}
Related
I have disabled right click on my website's videos because I want to discourage downloads. To that end I use the following code:
<video oncontextmenu="return false" controls="controls" controlslist="nodownload">
<source src="..."> video
</video>
However, with this users don't have the Controls' functionality. In particular, they cannot move forward or backwards with the keyboard arrows. Normally, to enable this functionality, you have to right click the video and select "Show Controls", as shown below:
Naturally, in my case that is not possible.
How can I enable those controls by default, so I can keep hiding that context menu? I've searched through default <video> attributes but can't find any relevant for me. Any ideas?
To disable right-click on video tag and yet keep video controls, try my example below:
What the codes does:
Gives your video tag an ID (see: id="myVid" )
Uses Javascript's preventDefault(); to block right-click on a specific item by its ID. (Eg: You might still want right-click to work on other [non-video player] parts of the page.)
Testable code example:
<!DOCTYPE html>
<html>
<body>
<video id="myVid" width="640" height="480" controls="controls" controlslist="nodownload">
<source src="filename.mp4" type="video/mp4">
</video>
</body>
</html>
<script>
//# use this line to prevent context menu in Video Element
document.getElementById("myVid").addEventListener('contextmenu', function (e) { e.preventDefault(); }, false);
</script>
I am using Videojs version 7.6.6. It will not play a html5 video if the src is a blob URL. It will load the video time however, but will not play. I get this warning, and then it loads forever:
VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the only playlist.
This is the way my code runs:
<video id="my_video" class="video-js vjs-matrix vjs-default-skin vjs-big-play-centered" controls
preload="none" width="640" height="268" data-setup="{}"></video>
<script type="text/javascript" src="/js/video-766.min.js"></script>
<script>
fetch("https://server/hls/index.m3u8").then(result => result.blob())
.then(blob => {
var blobURL = URL.createObjectURL(blob);
var player = videojs("my_video");
player.src({ src: blobURL, type: "application/x-mpegURL" });
}
);
</script>
If I try it without a blob, just a regular URL to the index.m3u8 file, then it works. So this is a problem with the creation of the blob URL I think. This works, the video starts playing:
<video id="my_video" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
<source src="https://server/hls/index.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('my_video');
</script>
I have searched for this issue and found a lot, but none of it helps me. Am I creating the blob wrong?
The object URL that is generated for the blob will start with file:// protocol if I'm not wrong. Browsers doesn't let you load data with file:// URL. I ran into a similar problem so I created a simple server on my app which returns the requested file over https:// .
The reason why your index.m3u8 is running because it is served over https protocol
I wrote a simple angular application in a learning purpose. However the controllers are working in my system but not in plunker. But, that is not my concern. My concern is I am unable to see the linked pages inside ng-view. They are rather opening as a new page replacing the home page. Secondly, the expressions are not reflecting their values. Kindly help me out. I have uploaded the codes in plunker.
Link to Plunker
<div ng-controller="RamFirstCtrl">{{name}}</div>
<div ng-include="'navbar-top.html'"></div>
<div style="border:1px solid green; position:relative;" ng-view></div>
Noticed couple thing:
http to https, there is error in console, it might be the reason it doesn't work in plunker
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
you have to use the url define in your router:
ng-href="aboutUS.html" to ng-href="#!/aboutUS"
.when("/aboutUS", {
templateUrl : "aboutUS.html"
})
<div>
<a ng-href="#!/aboutUS">
AboutUs
</a>
</div>
Note:#! will be added to url by angular router by default
In IE11 file upload button of ZK is not working.
I got few replies, It says after updating ZK it will fix the problem.
But we can't update ZK, So in this scenario is there any way to work out this problem any how.
If you can't upgrade ZK then you can try to "downgrade" the IE using "X-UA-Compatible" either as meta-tag or as a response header
here an example using the meta tag:
<?meta http-equiv="X-UA-Compatible" content="IE=10" ?>
<zk>
<fileupload label="upload" onUpload="alert(event.getMedia().getName())"/>
</zk>
and what it looks like in the browser (in the IE dev tools F12 you can check if the meta tag had an effect, you'll see that IE falls back to version 10):
http://screencast.com/t/ftheLA9Ud8
Finally I got the Solution.
AS IE 11 having problem to attach event for listening to open File chooser.
You just manually add the listener.
<button id="browsebtn" upload="true,maxsize=-1" visible="true" sclass="text">
<attribute w:name="doMouseDown_">
function (evt) {
}
</attribute>
</button>
Its simple and weird, However what I found is make the parent component as draggable="true"
<row draggable="true">
<div style="text-align : right;">
<label value="Image File:" />
</div>
<fileupload id="fileUpload" label="Upload" tooltiptext="Click to upload image file."/>
</row>
Now suddenly you will see your fileupload button in ZK started working correctly for IE11 as well.
I am trying to recreate this example in my project, to add the drag and drop feature to the dojo uploader:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/form/tests/test_Uploader.html
Copying the exact same code in jsfiddle or in my application the line
if(uploader.addDropTarget && uploader.uploadType=='html5'){
returns undefined for addDropTarget and iframe for the uploadType.
I tried it with various browsers, and even added force: html5 in the uploader but nothing changed.
Please, note that everything works ok except from the dnd.
I am using dojo 1.8.1.
In dojo 1.8, the uploader is not yet fully AMD compliant. So, in order to make the example from the trunk tests work in 1.8, you need to create the uploader programmatically using the dojox.form.Uploader constructor rather the required AMD module. As follows :
<form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
<fieldset>
<legend>DnD Test</legend>
<input class="browseButton" id="uploader"/>
<input type="submit" label="Submit" data-dojo-type="dijit/form/Button" />
<div id="files" data-dojo-type="dojox/form/uploader/FileList" data-dojo-props='uploaderId:"uploader"' ></div>
</fieldset>
</form>
<div id="dropTarget">Drop files here !</div>
And in the javascript :
require([
'dojo/parser',
'dojo/dom',
'dijit/registry',
'dojox/form/Uploader',
'dojox/form/uploader/FileList',
'dojox/form/uploader/plugins/HTML5',
'dojo/domReady!'
], function(parser, dom, registry, ready){
var dropTarget = dom.byId('dropTarget'), uploader;
parser.parse().then(function(){
// You need to use dojox.form.Uploader, as in dojo 1.8,
// the module is not fully AMD compliant yet.
uploader = new dojox.form.Uploader({
name:'uploadedfile',
label:'Select Some Files',
multiple:true,
force:'html5'
}, 'uploader');
uploader.startup();
if(require.has('file-multiple')){
console.debug("Adding a new drop target");
registry.byId('uploader').addDropTarget(dropTarget);
}
});
});
See http://jsfiddle.net/psoares/6r2jZ/