I have tried video tag, jw player. But nothing helped.
jw code,
<script type='text/javascript' src='jwplayer.js'></script>
<div id='mediaplayer'></div>
<script type="text/javascript"> jwplayer('mediaplayer').setup({ 'width': '480', 'height': '270', 'file': 'http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8', 'image': '/thumbs/sample.jpg', 'modes': [ {type: 'html5'}, {type: 'flash', src: '/player.swf'}, {type: 'download'} ] }); </script>
video tag,
<video width="300" height="200" controls> <source src="http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8"> </video>
Can anybody suggest ideas to play .m3u8 in HTML page..
You need to supply the MIME type attribute in the video tag: type="application/x-mpegURL
<video width="300" height="200" controls> <source src="http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8"
type="application/x-mpegURL> </video>
Related
I'm trying get the video in my post's body being autoplayed when the post is opened.
This is what it currerntly looks like:
<video class="wp-video-shortcode" id="video-611-1_html5" width="1080" height="1920" preload="metadata" src="https://jetminister.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/08/05141345/InVideo___Richard_Branson.mp4?_=1" style="width: 500px; height: 888.889px;"><source type="video/mp4" src="https://jetminister.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/08/05141345/InVideo___Richard_Branson.mp4?_=1">https://jetminister.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/08/05141345/InVideo___Richard_Branson.mp4</video>
I tried adding the autoplay using the following:
<script>
(function($) {
$(document).ready(function() {
$(".wp-video-shortcode").prop('loop', 'loop');
$(".wp-video-shortcode").prop('muted', true);
$('.wp-video-shortcode').prop('autoplay', true);
});
})(jQuery);
</script>
But it doesnt do anything. What am I doing wrong?
here's a post example where the video should autoplay.
https://jetminister.epic-cars.be/richard-branson/
Thank you
Thank
You need these attributes to get mute autoplay video : onloadedmetadata="this.muted = true", playsinline, autoplay, muted, loop
<video width="320" height="240" onloadedmetadata="this.muted = true" playsinline autoplay muted loop>
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Read this:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Autoplay only works if you use the mute attrib.
I'm creating a server for streaming videos. I use nginx and rtmp module.
But when I play video in my web, it works fine with Chrome and edge but Firefox is'nt.
Firefox shows this and I don't know why:
Here is my html file:
<video width="640" height="360" id="player1">
<source type="video/rtmp" src="rtmp://myserver:myport/livestreaming/live" />
<source type="application/x-mpegURL" src="http://myserver/livestreaming/live/index.m3u8" />
</video>
<script type="text/javascript" src="lib/demo/hls_streams.js"></script>
<script type="text/javascript">
function loadStream(url) {
$('video')[0].player.setSrc(url);
$('video')[0].player.play();
}
</script>
<script>
$('video').mediaelementplayer({
success: function(media, node, player) {
$('#' + node.id + '-mode').html('mode: ' + media.pluginType);
}
});
</script>
Can someone help me with this problem?
How do you detect when a HTML5 <video> element has finished playing?
You can add an event listener with 'ended' as first param
Like this :
<video src="video.ogv" id="myVideo">
video not supported
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
Have a look at this Everything You Need to Know About HTML5 Video and Audio post at the Opera Dev site under the "I want to roll my own controls" section.
This is the pertinent section:
<video src="video.ogv">
video not supported
</video>
then you can use:
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
/*Do things here!*/
};
</script>
onended is a HTML5 standard event on all media elements, see the HTML5 media element (video/audio) events documentation.
JQUERY
$("#video1").bind("ended", function() {
//TO DO: Your code goes here...
});
HTML
<video id="video1" width="420">
<source src="path/filename.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Event types HTML Audio and Video DOM Reference
You can simply add onended="myFunction()" to your video tag.
<video onended="myFunction()">
...
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
function myFunction(){
console.log("The End.")
}
</script>
Here is a simple approach which triggers when the video ends.
<html>
<body>
<video id="myVideo" controls="controls">
<source src="video.mp4" type="video/mp4">
etc ...
</video>
</body>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended', function(e) {
alert('The End');
})
</script>
</html>
In the 'EventListener' line substitute the word 'ended' with 'pause' or 'play' to capture those events as well.
Here is a full example, I hope it helps =).
<!DOCTYPE html>
<html>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
alert("Video Finished");
}
</script>
</body>
</html>
You can add listener all video events nicluding ended, loadedmetadata, timeupdate where ended function gets called when video ends
$("#myVideo").on("ended", function() {
//TO DO: Your code goes here...
alert("Video Finished");
});
$("#myVideo").on("loadedmetadata", function() {
alert("Video loaded");
this.currentTime = 50;//50 seconds
//TO DO: Your code goes here...
});
$("#myVideo").on("timeupdate", function() {
var cTime=this.currentTime;
if(cTime>0 && cTime % 2 == 0)//Alerts every 2 minutes once
alert("Video played "+cTime+" minutes");
//TO DO: Your code goes here...
var perc=cTime * 100 / this.duration;
if(perc % 10 == 0)//Alerts when every 10% watched
alert("Video played "+ perc +"%");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<video id="myVideo" controls="controls">
<source src="your_video_file.mp4" type="video/mp4">
<source src="your_video_file.mp4" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</html>
I am loading an html file to my webview using [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:#"faq" ofType:#"html"] isDirectory:NO]]]; Now I want to embed a youtube video into the html file. I have the file but don't know what to add in order for it to work. I have found code that let's you load it as a string but what I need is to load it inside the html file. I have tried adding, with a few fixes, the same code that I have found on other posts to the html file, but it always comes up as an external link, instead of embedded inside the html file. Here is what I have:
<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
function onYouTubeIframeAPIReady()
{
ytplayer=new YT.Player('playerId',{events:{onReady:onPlayerReady}})
}
function onPlayerReady(a)
{
a.target.playVideo();
}</script>
<iframe id="playerId" type="text/html" width="250" height="180" src="http://www.youtube.com/embed/9qkXs768JKY?enablejsapi=1&rel=0&playsinline=1&autoplay=1" frameborder="0"></iframe>
And my ViewController has :
self.webView.allowsInlineMediaPlayback = YES;
self.webView.mediaPlaybackRequiresUserAction = NO;
Any help and guidance is appreciated. Thanks in advance.
Other attempt:
I have tried the code below inside the HTML file but now it shows a play button with a line through it. Any idea how to fix it?
<video width="280" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<object data="movie.mp4" width="220" height="240">
<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
function onYouTubeIframeAPIReady()
{
ytplayer=new YT.Player("playerId",{events:{onReady:onPlayerReady}})
}
function onPlayerReady(a)
{
a.target.playVideo();
}
</script>
<iframe id="playerId" type="text/html" width="250" height="180" src="http://www.youtube.com/embed/9qkXs768JKY?enablejsapi=1&rel=0&playsinline=0&autoplay=0" frameborder="0"></iframe>
<!-- <embed src="http://www.youtube.com/embed/9qkXs768JKY" width="220" height="200">
</embed> -->
</object>
</source>
</source>
</video>
I am using this to play youtube videos in web views:
<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/XDJxoVIqdW0" frameborder="0">
For your UIWebView, you need to set allowsInlineMediaPlayback to YES in order to show the media in your app. It defaults to NO on the iPhone.
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/Reference/Reference.html#//apple_ref/occ/instp/UIWebView/allowsInlineMediaPlayback
Tell me please when stop all element audio with class 'media_audio_player'
example:
<audio src="./ConcertMedia/'.$i2['file'].'" class="media_audio_player"> </audio>
<audio src="./ConcertMedia/'.$i2['file'].'" class="media_audio_player"> </audio>
<audio src="./ConcertMedia/'.$i2['file'].'" class="media_audio_player"> </audio>
i want use code $('.media_audio_player').get(0).pause(); but he doesnt work...
Why not work code and what me need doing?
Please check the code which plays the sound based on class applied to audio Tags.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function playerClicked() {
audio=$(".audioplayer").get(1);
debugger;
audio.load()
if(audio.paused){
audio.play();
} else {
audio.pause();
}
}
</script>
</head>
<body>
<a id ="storyplayer" href="javascript:playerClicked();">
Click here to play.
</a>
<audio class ="audioplayer">
<source src="sound/siol.mp3" type="audio/mpeg" >
</audio>
<audio class ="audioplayer">
<source src="sound/siol.mp3" type="audio/mpeg" >
</audio>
</body>
</html>