I'm a beginner to Laravel 5, and I'm trying to play a video in my page.
Video code :
<div class="videoWrapper">
<video controls="" autoplay="" width="640" height="360">
<source src="{{ $lesson->download }}{{$video}}" type="video/mp4"></source>
</video>
<!-- <iframe
width="100%"
height="315"
src="{{ $lesson->download }}{{$video}}"
frameborder="0" allowfullscreen></iframe> -->
<hr/>
</div>
The result :
When I inspect, the url is correct :
By the way, when I use the iframe for Youtube videos, it works.
Thank you
it's my code. maybe works for you:
#if(strpos($vidUrl,"video:")!== false)
<video onclick="showVideo()"style="display: block;"
src="{{str_replace('video:','', $vidUrl)}}" controls width="500"
#endif
my $vidUrl is something like "video://SOME_URL//"
Related
I am very new to angular (and the front end) and I cannot get this video to autoplay.
I have tried a lot of variations:
<div class="landing-page">
<video id="videoLandingPage" class="video-js" autoplay controls type="video/mp4" src="https://12345asdf.cloudfront.net/a_video.mp4"></video>
</div>
This one:
<div class="landing-page">
<video id="videoLandingPage" class="video-js" autoplay muted controls type="video/mp4" src="https://12345asdf.cloudfront.net/a_video.mp4"></video>
</div>
And this:
<div class="landing-page">
<video id="videoLandingPage" class="video-js" autoplay muted controls loop type="video/mp4" src="https://12345asdf.cloudfront.net/a_video.mp4"></video>
</div>
And this:
<div class="landing-page">
<video id="videoLandingPage" class="video-js" autoplay muted controls loop playsinline type="video/mp4" src="https://12345asdf.cloudfront.net/a_video.mp4"></video>
</div>
Nothing seems to let the video auto play. So... I tried:
export class LandingPageComponent implements AfterViewChecked {
constructor() { }
ngAfterViewChecked(): void {
var video = document.getElementById('videoLandingPage') as HTMLVideoElement;
video.play();
}
}
Any one know why this is happening? or could point me in a quick fix direction?
I Have multiple videos in single page of Angular Application
I want to play video while scrolling when video element come to element, and pause other videos.
i.e
<div class="video_content left">
<span style="font-weight:bold">1</span>
<video width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
<div class="video_content left">
<span style="font-weight:bold">2</span>
<video width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
<div class="video_content left">
<span style="font-weight:bold">3</span>
<video width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
<div class="video_content left">
<span style="font-weight:bold">4</span>
<video width="213" height="120" controls class="video_tag">
<source src="<MY VIDEO SOURCE>" type="video/mp4" />
</video>
</div>
#HostListener('window:scroll', ['$event'])
scroll(event: any) {
console.log(window.pageYOffset);
var demo_video: any = document.getElementById("demo_video");
var how_to_video: any = document.getElementById("how_to_video");
if (window.pageYOffset > 400 && window.pageYOffset < 1000) {
demo_video.muted = true;
demo_video.pause();
how_to_video.play();
}
}
ngOnInit(): void {
var demo_video: any = document.getElementById("demo_video");
demo_video.muted = false;
demo_video.play();
window.addEventListener('scroll', this.scroll, true);
}
When I play video it may be landscape or portrait in orientation. I have 2 images imgfeatured1 and imgfeatured2 which appear left and right of the video respectively. I wish these images to adjust automatically to be the same height as the video being played.
<div id="streaming">
<video playsinline ID="videoToPlay" poster="https://www.example.co.uk/files/images/videoPoster.jpg" runat="server" autoplay preload class="videosize" controls>
<source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
<source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
<source src="video/video.mov" type="video/mov"></source>
</video>
<asp:Image ID="imgFeatured1" alt="Featured 1" imageUrl="https://www.example.co.uk/files/images/icons/featured1.png" class="videologo" runat="server" />
<asp:Image ID="imgFeatured2" alt="Featured 2" imageUrl="https://www.example.co.uk/files/images/icons/featured2.png" class="videologoright" runat="server" />
</div>
CSS so far..
.videologo {
position: absolute;
left: 5px;
}
.videologoright {
position: absolute;
right: 5px;
}
if you want it static based on what is loaded on request you need to use javascript to get and set height on the images.
if you want the images to be on each side of the video you need to rearrange the html if you want to follow best practices.
Javascript version:
Get the height of the video and set that height to the image while width = auto
var imageOne = document.getElementById("imgFeatured1");
var imageTwo = document.getElementById("imgFeatured2");
var vid = document.getElementById("videoToPlay");
imageOne.style.height = vid.offsetHeight +"px";
imageTwo.style.height = vid.offsetHeight + "px";
console.log(vid.offsetHeight);
console.log(imageTwo.style.height);
#streaming {
display: flex;
}
body {
background: #333;
}
<body>
<div id="streaming">
<img id="imgFeatured1" alt="Featured 1"
src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
class="videologo" runat="server" />
<div id="VidWrapper">
<video playsinline id="videoToPlay" runat="server" autoplay preload class="videosize" controls>
<source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
<source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
<source src="video/video.mov" type="video/mov"></source>
</video>
</div>
<img id="imgFeatured2" alt="Featured 2"
src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
class="videologoright" runat="server" />
</div>
</body>
CSS version
Set img and video height to the same and automatic width
#streaming {
display: flex;
}
body {
background: #333;
}
img, video{
height: 25vh;
width: auto;
}
<body>
<div id="streaming">
<img id="imgFeatured1" alt="Featured 1"
src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
class="videologo" runat="server" />
<div id="VidWrapper">
<video playsinline id="videoToPlay" runat="server" autoplay preload class="videosize" controls>
<source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
<source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
<source src="video/video.mov" type="video/mov"></source>
</video>
</div>
<img id="imgFeatured2" alt="Featured 2"
src="https://betterstudio.com/wp-content/uploads/2019/05/1-1-instagram-1024x1024.jpg"
class="videologoright" runat="server" />
</div>
</body>
How can i disable/Hide share option on embedded dailymotion?
Blockquote
https://www.dailymotion.com/embed/video/x5hywa
You can disable it via the query string in the URL in the iframe.
--> "sharing-enable=false"
For instance:
<iframe frameborder="0" width="480" height="270"
src="//www.dailymotion.com/embed/video/x5hywa?sharing-enable=false"
allowfullscreen allow="autoplay"></iframe>
Just put that video in an iFrame and you're fine. There's no overlay.
<iframe src="https://www.dailymotion.com/embed/video/x5hywa" style="border:0px #ffffff none;" name="iFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="600px" allowfullscreen></iframe>
Example: http://jsfiddle.net/ysxf4qt3/
here is my code snippet
<img src="images/home.jpg" height="40" width="150" />
<img src="images/contact.jpg" height="40" width="150" />
and
<iframe src="aboutseels.php" scrolling="auto" width="100%" height="360" ></iframe>
now, i was wondering if there is a way that when the client clicks one of the images, the src of the iframe will change??
for example if i click on the second image the src of the iframe will be src="contactus.php"
I think you set a name attribute on the iframe and wrap the images in an a tag with the target attribute to be the same name.
<iframe name="foo" ...></iframe>
...
you could use the javascript library jQuery and then use the click event to capture clicks on the images it could look something like this
$(function(){
$('img').click(function(){
iframeSrc = this.attr('title');
$('iframe').attr('src',iframeSrc);
});
});
and the html could look like this then
<img src="images/home.jpg" height="40" width="150" title="http://google.com" />
<img src="images/contact.jpg" height="40" width="150" title="http://facebook.com"/>
<iframe src="aboutseels.php" id="iframe" scrolling="auto" width="100%" height="360" ></iframe>
Or use regular html and use target
<a target="iframe" href="http://facebook.com"><img src="images/home.jpg" height="40" width="150" title="http://google.com" /></a>
<a target="iframe" href="http://google.com"><img src="images/contact.jpg" height="40" width="150" title="http://facebook.com"/></a>
<iframe src="aboutseels.php" id="iframe" scrolling="auto" width="100%" height="360" ></iframe>