I'm new in CakePhp and I wanted to create a view where I can read an audio file, here's my code from my play.ctp.
<audio controls>
<source src="files/niro.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I have also created an empty funtion in my controller.
The file "niro.mp3" is in app/webroot/files but I cannot read it from my view.
The src should be '/files/niro.mp3' rather than 'files/niro.mp3' to make the path absolute.
<audio controls>
<source src="/files/niro.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Related
I am creating an app using React and Laravel. I want to apply a bg video in my app and also have the code ready. The webpack mix is running successfully. All the components are being displayed except for the video.
I have provided the code snippet below.
import Video from "../../../videos/HomeVideo.mp4";
<HeroContainer id="home">
<HeroBg>
<VideoBg autoPlay loop muted src={Video} type="video/mp4" />
</HeroBg>
<HeroContent>
<HeroP>
Sign up today and receive a 10% discount on your next
service.
</HeroP>
</HeroContent>
</HeroContainer>
Everything is running fine, just the video is not being displayed
Please remove muted from your code.
<VideoBg autoPlay loop src={Video} type="video/mp4" />
Also, try to use a built-in video tag of react.
<video loop autoPlay>
<source
src={Video}
/>
Try to use this snippet to show up your video.
</video>
I'm building my website using React and have multiple images to display. After running an audit using the Google Chrome audit function, I've been getting the "Serve images in next-gen formats" opportunity message.
After reading about the various formats (WebP, JPEG2000, JPEGXR), it seems each is supported on only select browsers. For instance, I can't just convert all of my images to WebP because they won't show up on the Safari browser. So my issue is how to I "serve" each type of image depending on the browser being used? This is what I've tried:
I have 3 types of files, jpg, JPEG2000, and WebP. Each is being imported like:
import Imagejpg from './path/image.jpg'
import ImageJPEG2000 from './path/image.JPEG2000'
import ImageWebP from './path/image.webp'
Then in my class, I have an object array that contains the images. To use the images:
<picture>
<source>
srcSet={`
${project.Imagejpg},
${project.ImageJPEG2000},
${project.ImageWebP},
</source>
<img src={project.imageWebP} alt=""/>
</picture>
Now, if I only use the jpg image, it works fine on all browsers as most browsers can use jpg. But I'm trying to optimize my site and use the better types of image files. Is there a way to use the several types of files or is there something I am missing?
The solution is indeed in the <picture> element, but using multiple sources.
The code with correct syntax looks like this:
<picture>
<source srcSet={project.ImageWebP} type="image/webp" />
<source srcSet={project.ImageJPEG2000} type="image/jp2" />
<source srcSet={project.Imagejpg} type="image/jpeg" />
<img src={project.Imagejpg} alt="" />
</picture>
Explanation
Seeing the picture element, a browser will download the first source it can support. If it's an old browser that doesn't support <picture> at all, it will fall back to the <img /> tag which has a jpeg source.
This is a quick and easy win to improve your page's speed. The tiny overhead in extra HTML bytes does not negate the speed improvements except in extreme scenarios, like very small and simple images.
I have a project where I've embedded an html5 video on a view.
I populate the source dynamically using $scope.
The initial video I populate the player with works fine.
At the end of the video, I try to change the src of the video to the next clip, until it ends.
My problem is that the video src does not update and just plays the initial clip.
Here's the html (pretty straight forward):
<video style="width:100%; height:100%; padding:0;" class="embed-responsive embed-responsive-16by9" id="myVideo" controls>
<source ng-src="{{currentVideo}}" type="video/mp4">
</video>
Here's the code that implements the change from the controller:
if (videoId.currentTime >= videoId.duration - 1) {
// $state.go('unit_1');
$scope.currentVideo = myObj.units[1].lessonUrl; //set video
videoId.play();
}
FYI - videoId is the var for the video. It works fine, as I can play(), pause(), get currentTime, etc.
So I know I'm controlling the player and that I'm successfully loading the initial video.
I'm assuming that when the $scope changes the new video URL would, but obviously I'm wrong.
Any ideas?
Thanks!
If you want to change the src on the video's <source> element, you need to call videoId.load(); before videoId.play(); Otherwise just change the src attribute directly on the video element itself - then a load will not required:
<video ng-src="{{currentVideo}}" style="width:100%; height:100%; padding:0;" class="embed-responsive embed-responsive-16by9" id="myVideo" controls>
</video>
I have an AngularJS app that presents some sequential videos and if I go to another URL (by using another HTML reference, href) the old controller stays active and both videos still playing. This happens for each new page with the same controller that I've openned, creating multiple video instances.
The controller receives a video SRC and sets it using ng-src.
EDIT
I am getting video element by ID:
var video = document.getElementById("video");
And setting correspondent source when controller is initialized:
if (video) {
video.src = Modernizr.video.ogg ? $scope.mainVideoUrlogv :
Modernizr.video.webm ? $scope.mainVideoUrlwebm :
$scope.mainVideoUrlmp;
$scope.playVideo();
}
HTML
<video id="video" ng-mouseup="pauseOrPlayVideo()">
<source ng-src="{{mainVideoUrlwebm}}" type="video/webm">
<source ng-src="{{mainVideoUrlogv}}" type="video/ogv">
<source ng-src="{{mainVideoUrlmp}}" type="video/mp4">
</video>
The solution was to remove the video Element from the page.
var video = document.getElementById("video");
Mozila documentation about ChildNode.remove() helped to perform remove action.
video.remove(); //javascript way
However, I've realized that it does not work on IE, as you can notice in the last reference.
The solution was to perform this action in jQuery.
$('video').remove(); //jQuery way
It works in the browsers that I have tested, namely Chrome, Firefox Dev Edition and IE9, IE10.
I have a html5-tag using the scope to set the src:
<video style="max-height:100%; max-width:100%" controls>
<source src="/files/{{item.path}}" type="video/mp4"/>
</video>
If I load this template I get this error:
GET http://localhost:8070/files/%7B%7Bitem.path%7D%7D 404 (Not Found)
Btw. this is not the correct value of item.path. If I set the path manually it works:
<source src="/files/./5315dfea66469e28166e85c6/5315dfea66469e28166e85c6_20143414248143.mp4" type="video/mp4"/>
How can I make this work?
This is an open issue with Angular:
https://github.com/angular/angular.js/issues/1352
ng-src is appropriate here. however, it is confirmed to not work in all browsers and is suspected to be a bug in the browser rather than with Angular.
There is a possible workaround here: HTML5 video element request stay pending forever (on chrome)