I am using video.js to play m3u8 and this file contains multiple channels.
I would like to show channel list and choose any of them to play.
I have searched but I couldn't find this function.
This is source code
<video-js id="my_video_1" class="vjs-default-skin" controls preload="auto" width="640" height="268">
<source src="--m3u8 file path--" type="application/x-mpegURL">
</video-js>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/#videojs/http-streaming/dist/videojs-http-streaming.js"></script>
<script>
var player = videojs('my_video_1');
</script>
This is my m3u8 file content
#EXTM3U
#EXTINF:0,##### |AR| MOROCCO #####
line.ma-cobra.com:80/Cesar2/Y5SNvNqGfyxH3Qb/3547
#EXTINF:0,|AR| CORONA VIRUS INFO
line.ma-cobra.com:80/Cesar2/Y5SNvNqGfyxH3Qb/113221
#EXTINF:0,|AR| AL AOULA INTER
line.ma-cobra.com:80/Cesar2/Y5SNvNqGfyxH3Qb/2189
Now there are 3 urls (which I call channel, I don't know if it's correct to call this channel) So I want to show menu of containing these 3 links and want to click one to see it. Thanks
this is the documentation video.js. I think what you are looking for, is to change the source of the video. When you create an instance you can change the source with any event.
var player = videojs('some-video-id');
player.src({
src: 'https://link.to./file.m3u8',
type: 'application/x-mpegURL',
});
It looks like you are combining different pieces of content inside the same HLS master manifest. Master manifests are supposed to contain different renditions of the same content, such as different quality levels or alternate audio. #joshua-joel-cleveland is correct. You would need to change the src value for your video element when you want to change content/channels.
Related
I'm new to VueJS and trying to setup a simple page and embed a script to play HLS video using JW Player the script provided by JW Player dashboard <script src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.js"></script>
What would be the proper way to embed that script into .vue file
Knowing .vue files should have template, script and style elements and my understanding is it has to go inside script as a part of data but I'm quite confused on how I would do that and call it inside the template to view it in the browser??
Any help would be appreciated
As you've discovered, <script> tags cannot be embedded in Vue.js. However, <iframe> is a valid tag. The JW Platform allows for you to embed videos via a script tag OR an iframe tag.
Change this:
<script src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.js"></script>
Into this:
<iframe src="https://cdn.jwplayer.com/players/4oE5ZjIY-MoGLPkuA.html"></iframe>
Notice that the .js changes into .html and script changes into iframe
You may need to customize the iframe to fit your usage properly, some reference docs for how to do that can be found here.
Should both of these code blocks be used?
Should only one code block be used? If so, which one?
code per video.js
<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'>
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
<source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
code per amp-video-iframe
function onAmpIntegrationReady(ampIntegration) {
var myVideo = document.querySelector('#my-video');
ampIntegration.listenTo('videojs', myVideo);
}
amp-video-iframe is not supported by amp-story. The supported tags, depend on what type of layer you are using, but for amp-story-grid-layer they can be found here. Notably, if you are looking to play video, amp-video is currently the only way to do it. Since amp-video-iframe supports AMP's video interface, you can see this GitHub issue to track the implementation/support for this feature.
But, to answer your question (as it is relevant for AMP pages that are not stories): both snippets are necessary. The first code snippet adds the video to the page, while the second code snippet listens for events like play and pause to communicate them back and forth to the AMP runtime. Note that you'll need to make sure that the IDs are the same (in the code you've posted, the HTML refers to the video by the ID my-player, while the JS refers to the video by the ID my-video).
I am trying to show a pdf content in a Ext.Container of Sencha Touch 2. Tried several ways answered on SO but they all didn't work.
Few things tried, include:
Tried converting file content into html and extract the HTML inside the BODY tag and put it into Ext.XTemplate of the Container. This way I can only play cool with it, if HTML is being converted from a .doc file but if it was a .pdf file it messes up design because when I convert a pdf file into HTML then it adds position: absolute inside every DIV and with absolute position the parent element will not have any height and I am stuck with the scrolling issues.
for example:
<div style="position:relative;display:inline-block;;top:994px;left:712px;font-family:'Times New Roman';font-size:10pt;white-space:nowrap;">description</div>
Second try,
2. Tried putting PDF into IFRAME and EMBED tags as a link and put them into the Ext.XTemplate but these tags are also not working in mobile.
for example:
<embed type="application/pdf" width="800px" height="800px" src="example.pdf" />
<iframe style="position:absolute; z-index: 1; left: 0; top: 0;" width="100%" height="2000" src="example.pdf"></iframe>
Please give some idea how to display/open PDF(or its content, with atleast few formatting). Or do we have any plugin to display it. One final solution is showing using google docs but my initial requirement is showing PDF content in sencha touch 2 app not using any third party service(like google docs).
you can use inapp browser plugin for opening file in the iOS:
install inappbrowser cordoav plugin and open file like this:
function openPDF(){
ref = window.open('http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf', '_blank', 'location=no');
ref.addEventListener('exit', function() {
ref.removeEventListener('exit', function(){});
ref.close();
} );
}
It is very useful the PDFObject library, I have added this third-parties library to my project based on Sencha Touch 2 and its working in the browser, my current issue is show the pdf in Ipad.. :-(
First off I am completely new to Javascript but I have some HTML/CSS experience. I've been trying to create an html/javascript image gallery for a website; (It would probably be a lot easier to do in PHP but the web coordinator disabled PHP on our server for security reasons).
Anyway What I have is a page showing an Album-list, Album-browser and Photo-viewer in different a div and 2 iframes respectively. I have it set up so that when someone clicks on an album from the album list, a page is opened up in the album browser section (iframe:"browser-frame" showing thumbnails of all the images in the particular album). I've been trying to set it up so that when someone clicks on an image in the album browser the image will appear in the Photo-viewer section (iframe:"viewer-frame" showing the photo itself).
I didn't want the photo's in the viewer-frame to be larger than the set dimensions for the viewer-frame so I created a page for the viewer-frame that puts the image in a div with a class of set dimensions (defined in a stylesheet) as follows:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
</div>
</body>...
I then created a script that updates the image src to a variable:image_to_be_viewed and called it image-changer.js
// JavaScript Document
{
var image_to_be_viewed="images/album1/1.jpg";
document.getElementById("viewed_image").src=image_to_be_viewed;
}
And added a script to the viewer-frame page so it looks like:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
<script src="image-changer.js"></script>
</div>
</body>...
Now I wanted the gallery to work so that in the page loaded in the browser-frame, whenever one clicked on one of the pictures, the value of the global variable 'image_to_be_viewed' would be changed to the source of the clicked image as follows:
<body>
<div class="photobrowse">
<img class="medium" src="images/album1/1.jpg" onClick="image_to_be_viewed='images/album1/1.jpg'"/>
<img class="medium" src="images/album1/2.jpg" onClick="image_to_be_viewed='images/album1/2.jpg'"/>
<img class="medium" src="images/album1/3.jpg" onClick="image_to_be_viewed='images/album1/3.jpg'"/>
</div>
</body>
It doesn't work....
the gallery i'm working on is on http://ptc.tamu.edu/test/gallery_directory/test_gallery.html
everything up to the loading of the selected picture in the viewer frame works (I'm running the onlick event on the default loaded pictures 1,2,3 in the browser-frame page)(default pic's 4 and 5 simply load the image in the iframe but with no way to adjust the size it is too big and gets cut off and i don't want that)
I've been working on for an entire day and I'm sure I'm doing something wrong here but I can't figure out what exactly it is. I have a feeling it has to do with changing the global variable: image_to_be_viewed from the browser-frame page but I wanted to confirm with experts instead of flopping about like a headless fish. I'm going to continue trying to figure this out but i thought maybe having some expert assistance would speed up the process.
What the onclick triggers should be a javascript function call.
e.g. onclick="changeImg('images/album1/1.jpg')"
And the function itself should looks like this
function changeImg (image_to_be_viewed) {
document.getElementById("viewed_image").src = image_to_be_viewed;
}
btw, you probably should learn javascript a little bit more before work on something real. I recommend this book
thank you I got it to work! I figured that the changeImg function was targeting the wrong document/wrong frame and I fixed it by changing the js script to:
function changeImg (image_to_be_viewed) {
window.parent.viewer_frame.document.getElementById("viewed_image").src = image_to_be_viewed;
}
I have a pdf file served via regular html ('a' tag) but it can take a while to download on slow connections, is it possible to add a loading gif so the user knows that something is being downloaded instead of staring at the same page and maybe think nothing is happening?
I tried one of the solutions offered here to preload the pdf and store it in the cache until it is requested, it shows no loading image but the file should load faster:
<script language="javascript" type="text/javascript">
//<![CDATA[
<!--
var pdfLoader = document.getElementById("pdfLoader");
pdfLoader.src = "http://mysite.com/mypdf.pdf";
//-->
//]]>
I'm on a decent connection so I have no way of testing it, should that work as it is or is there another option I can try?
Thank you.