Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

I want to implement video tags using video_player div in my html5 app to play the channel videos in a Live TV app and replace the url showing to the uers

[ Edited ]

Please  help   me    I have played  manually     by puting this code in .html

 

 

 

 

 

function checkvideo()
{
$("#video_player").append('<video width="340" height="260" controls><source src="   stream link" type="video/mp4"></video>');
}
</script>

 

 

I have played  the stream /link using video tag in .html

 

 

Now I want to replace the original url showing to the users    as my url is confidential  .

 

 

 

 

 

 

 

Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: I want to implement video tags using video_player div in my html5 app to play the channel videos in a Live TV app and replace the url showing to the uers

How to implement video tag in javascript    to play a video file  i.e a rtsp link or any parsed dynamically ?

 

 

 

Can any one give the sample html5 app  for the implementation of the  videotags.

 

 

I have parsed a xml.aspx file conatining my streams  and images .Now I want to play those with video tags  in .js or .html

Highlighted
New Developer
Posts: 10
Registered: ‎05-18-2013
My Device: Developer - no device yet
My Carrier: Developer

Re: I want to implement video tags using video_player div in my html5 app to play the channel videos in a Live TV app and replace the url showing to the uers

I wrote a function to add video tag in a page and change its source dynamically a few month ago.

Here is my function, but you must modify it to fit your project.

 

function playVideo(source) {
	var page = document.querySelector('.current'),
		video, vid = null;

	// If there is no player on the page, create it
	if (!page.querySelector('video')) {
		// Create HTML5 video tag.
		vid = document.createElement('video');

		// Add some atributes...
		vid.controls = true;

		// Insert video into the page
		page.insertBefore(vid, page.firstChild);

		// Keep a reference on the tag
		video = vid;
	}
	else 
		video = page.querySelector('video');

	// TODO: add correct source according to the video format
	video.innerHTML = '<source src="' + source + '" type="video/webm">';
	video.innerHTML += '<source src="' + source + '" type="video/mp4">';
	video.innerHTML += '<source src="' + source + '" type="video/ogg">';
	video.innerHTML += '<p>Video unreadable :( </p>';

	// Load and play video
	video.load();
	video.play();
}

 

Hope it help,

 

benVigie

Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: I want to implement video tags using video_player div in my html5 app to play the channel videos in a Live TV app and replace the url showing to the uers

Actaully as I said my streams are already parsed dynamicaly and no need to give manually.

 

 

The code w ill be in the following way

 

 

var videosrc=channel[link]

 

function test_fn() {

var channels = mchannels;
var markup = "";
for(i=0; i < channels.length; i++){
var ch=channels[i];
if(ch['language']==mstep1) {
markup += generateHTMLMarkup(i, channels[i]);
}
}
document.getElementById("accordian").innerHTML = markup;
}

function generateHTMLMarkup(i, channel){

var str ="";
str += "<div class='ui-category-list-item-title-for-Global-Takeof'\">";
str += "<img class='img_chan'style='margin-top:10px;' src=\"" + channel['image'] + "\" />" +
"<a href=\"" + channel['link'] + "\">" + channel['name'].replace("Low",".") + "</a>" + "</div>";
str += "<div class='ui-list-item'>"+ + "<a href=\""+ channel['link']+"\">"+"</a>"+" </div>";
return str;

}

 

 

Here channel[link]  is  video stream path which is to be played.

 

 

Please guide me                if my index,html is    in the following way

 

 

 

function checkvideo(videosrc)
{
$("#video_player").append('<video width="320" height="240" controls><source src="+videosrc+" type="video/mp4"></video>');
}

 

 

 

 

 

</div>
<div id="video_player">

</div>
<a href="#" onclick="checkvideo(videosrc)"></a>

</body>
</html>

 

 

 

what changes to be made in .js so that my videosrc=channel[link] will pay with videotag directly   instead of default browser   player

New Developer
Posts: 10
Registered: ‎05-18-2013
My Device: Developer - no device yet
My Carrier: Developer

Re: I want to implement video tags using video_player div in my html5 app to play the channel videos in a Live TV app and replace the url showing to the uers

Do you mean play the video in a kind of iframe into the page instead of play it in full page ?

 

Your explanation is very unclear...

Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: I want to implement video tags using video_player div in my html5 app to play the channel videos in a Live TV app and replace the url showing to the uers

I dont want  to play in iframe exactly but   Iam using videoatgs  as there is a option for  replacing/hiding    the urls showing to

 

the users with    another url.

 

 

That is why I want to my video to be played  with video tag only instead of  default browser / player 

Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: I want to implement video tags using video_player div in my html5 app to play the channel videos in a Live TV app and replace the url showing to the uers

If  we use iframe also it is well and good provided we achieve our Targets i.e hiding/ skipping the url page from theusers.

 

 

 

Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: I want to implement video tags using video_player div in my html5 app to play the channel videos in a Live TV app and replace the url showing to the uers

Still Iam unclear ?

 

Got my query and my targets atleast now ?

 

 

fee free to contact me again  regarding these.

 

 

Developer
Posts: 672
Registered: ‎12-04-2012
My Device: BlackBerry 8520
My Carrier: Airtel

Re: I want to implement video tags using video_player div in my html5 app to play the channel videos in a Live TV app and replace the url showing to the uers

Can u please implement the similar code in my app i.e main.js code .



function generateHTMLMarkup(i, channel){
alert("this is lang"+str);
var str ="";
str += "<div class='ui-category-list-item-title-for-Global-Takeof'\">";
str += "<img class='img_chan'style='margin-top:10px;' src=\"" + channel['image'] + "\" />" +
"<a href=\"" + channel['link'] + "\">" + channel['name'].replace("Low",".") + "</a>" + "</div>";
// str += "<div class='ui-list-item'>"+ "<a href=\""+ channel['link']+"\">"+"</a>"+" </div>";
str += "<div class='ui-list-item'>"+ + "<a href=\"" + channel['link']+"\">"+"</a>"+" </div>";
// str +=" <div onclick="mwl.hide('#app_ui');mwl.show('#splash');mwl.timer('timer', 500, 1,'mwl.hide(\'#splash\');mwl.show(\'#app_ui\'); mwl.loadURL(' channel['link']')">Start video</div>";
alert("this is lang"+str);
return str;

}







function parseXML()
{
if(xmlHttp.readyState==4 && xmlHttp.status==200)
{
var str ="";
var output = xmlHttp.responseText;
parser=new DOMParser();
xmlDoc=parser.parseFromString(output,"text/xml");

var items = xmlDoc.getElementsByTagName("channel");
if(items.length>0){
for(i=0;i<items.length;i++){
if(items[i].getElementsByTagName("language")[0].childNodes[0].nodeValue==mstep1){
//alert(items[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);

str += "<div class='list" + (i%2==0?1:2) + "'\">";
str += "<img class='img_chan' style='margin:10px 0px; float:left;' src=\"" + items[i].getElementsByTagName("image")[0].childNodes[0].nodeValue + "\" />" +
"<a class='link_fon' href=\"" + items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue + "\">" +items[i].getElementsByTagName("name")[0].childNodes[0].nodeValue.replace("Low","").replace("Medium","").replace("High","") + "</a>" + "<img style=\"float:right; margin-top:30px;\" src=\"arrow.png\" width=30 height=30/>"+ "</div>";
str += "<div class='ui-list-item'>"+ "<a href=\""+ items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue+"\">"+" </div>";


/*alert("@@@@@@@2"+str);*/
}//if select according to language
}//for iteration
document.getElementById("accordian").innerHTML = str;
}//if length
}// if status
}