I'm working on WordPress site, and have programmatically integrated Video.js player in it. The screen is black and i can hear the audios. Most probably, it's due of bandwidth (as shown in screenshot attached).
Sometimes i'm able to watch videos, but most of the times, its black screen.
How to fix this issue. My code is as:
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<?php
$var_value = $_GET['video_id'];
?>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'>
<source src="https://d3eykkkvwlu40v.cloudfront.net/v2/hls/<?php echo $var_value?>/<?php echo $var_value?>.m3u8" type="application/x-mpegURL">
</video>
<script src="http://static.jsbin.com/js/render/edit.js?4.0.4"></script>
Please guide. Thanks.
The Media Source Extension (MSE) in browsers don't support that you dynamically switch between an audio/video and an audio-only stream or vice versa. So if the player starts with the audio-only variant it won't be able to switch up at all or just plays the audio of that variant.
Theoretically it would be possible for a player to switch between those variants by re-initializing the MSE for every such switch. But I don't know if any player supporting this, for good reasons:
the switch would not be completely seamless
the buffered data would be deleted by the browser
This would be a bad user experience.
So I think there are three options: live with it, remove the audio-only variant or find/build a player that supports this. I'd go for the removal.
Related
In my Next.js app I would like to embed a media player with Azure Media Services.
I followed the set-up process in docs:
1. added these 2 tags in the custom Head component
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet" />
<script src= "//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
pasted this video tag in the page
<video id="vid1" className="azuremediaplayer amp-default-skin" autoPlay controls data-setup='{"nativeControlsForTouch": false}'> <source src='//amssamples.streaming.mediaservices.windows.net/3b970ae0-39d5-44bd-b3a3-3136143d6435/AzureMediaServicesPromo.ism/manifest' type="application/vnd.ms-sstr+xml" /> </video>
However, the media player doesn't work and I'm getting this error in the console
Warning: Expected server HTML to contain a matching <video> in <div>.
I guess it has something to do with SSR.. How should I handle this problem?
I think you can use next.js with react-router to solve the issue.
In React, you can check answers in this post. After read the answer, I think we also can figure the problem by BrowserRouter.
Hey guys I am trying to play a .swf file on my web page I have already tried to embed it using HTML and it works. But is there anyway of playing a .swf file after button click event in asp.net?
Before you get to carried away with using flash could I urge you to read this http://occupyflash.org/ and then invest a little of your time researching html5 (specifically canvas) :)... http://www.williammalone.com/articles/flash-vs-html5-canvas-drawing/ and this http://webdesign.about.com/od/html5tutorials/a/canvas-vs-svg-vs-flash.htm will give you a good start.
Edit
Without seeing your current code I can't give a precise answer but this should work:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video src='insert-route-to.swf' id='insert-id-here' controls>
Your browser does not support HTML5 videos please Upgrade.
</video>
<button onclick="document.getElementById('insert-id-here').play()">Play</button>
<button onclick="document.getElementById('insert-id-here').pause()">Pause</button>
</body>
</html>
on button click
Response.redirect("file path");
something like:
Response.redirect("Video/abc.swf");
where "Video" is folder name which is present in project folder and "abc" is file name.
I've created code for HTML5 identical to that which I use in ASP, but the video never loads. It's like it's never found; there's just an empty video player sitting there on the scree. The same code works just fine in HTML. Here's the code I used for both (minus the asp tags in HTML):
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<video width="960" controls>
<source src="Printer_network_config.mp4" type="video/mp4">
</video>
</asp:Content>
Any ideas why the video doesn't play? Nothing I've found online helps; it's all just proper syntax and what tags to use.
I've viewed the page source in the browser, but it apparently can't find the video file;
Resolution: I neglected to properly close the source tag. Small and simple things.
Be sure to close ALL tags. Especially the source tag.
I am using this
<audio src="audio.mp3" />
Now that file is big and system automatically downloads it when someone loads the page.
is there any way that when someone press play , only then system downlaods. Because that player is in my every page and it wastes the BW
You can use the preload='none' attribute. Documentation here
The "none" attribute:
Hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimise unnecessary traffic. This state does not provide a hint regarding how aggressively to actually download the media resource if buffering starts anyway (e.g. once the user hits "play").
Your HTML could look something like this:
<audio preload="none">
<source src="audio.mp3" type="audio/mpeg" />
Your browser does not support this audio type.
</audio>
I've got a my own website and I've put on my website a radio interview (MP3 file). On my website there is a tool which takes the MP3 file and plays it.
My file URL is "http://www.abc.com/invterview/July 9 interview.MP3"
Now, another website wants to play the same file and asks me to give te embed/share link.
Can someone help me how to accomplish this link?
I googled and found this webpage http://www.labnol.org/internet/design/html-embed-mp3-songs-podcasts-music-in-blogs-websites/2232/ ,which explains how to accomplish an EMBED, but I've never done this and I know Chrome, IE, FF, Safari have it's own instructions...
So can someone guide me how to accomplish an EMBED URL so it will work on all Browser?
Do I need to use or what is the common use??????
if it was video file I could upload it to Youtube and send that link, but this is a MP3 file.
thanks
You could use HTML5, which has native support for playing audio.
<audio controls="controls" height="100" width="100">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
If a browser does not support HTML5, the code above will fallback to the embed code.
Other than that, you could use the yahoo media player. It's not the coolest or best around, but it's simple and it gets the job done.
Play Song
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>