Html5 video is not streaming in safari(mac) browser.
here's the code
<%= video_tag(['filepath/banner-video.mp4'], :width => '100%', :autoplay => true, :loop => true, :type => 'video/mp4') %>
It works fine in chrome/FF. any help would be appreciated.
Related
<Vimeo
videoId={'embeeded'} // embeeded link here.
onReady={() => console.log('Video is ready')}
onPlay={() => console.log('Video is playing')}
onPlayProgress={(data) => console.log('Video progress data:', data)}
onFinish={() => console.log('Video is finished')}
loop={false}
autoPlay={true}
controls={true}
speed={false}
time={'0m0s'}
/>
I don't have any problems with normal videos. I can view them. What I want is to be able to play private videos that are closed to the outside. The "react-native-video-iframe" library.
"react-native-vimeo-iframe": "^1.0.4",
My requirement is when the page loads the video should be start playing from the local storage and but it doesnt play at all.
Initially the state paused:true , and when the video loads i tried to change the state to false , but the video doesnt play automatically.
<Video
onEnd={this.handleEnd}
onLoad={this.handleLoad}
onProgress={this.handleProgress}
autoplay={true}
paused={this.state.paused}
ref={ref=> {
this.player = ref;
}}
resizeMode="cover"
source={{uri:this.state.v_url}}
volume={this.state.muted==true?0.0:1.0}
muted={this.state.muted}
/>
handleLoad = (meta) => {
console.log('Its working',this.props)
this.setState({
duration:meta.duration,
paused:false,
})
Use #coffeebeanslabs/react-native-inviewport to detect whether your component is in your device viewport:
Install using: npm i #coffeebeanslabs/react-native-inviewport
then do the following in your code:
import InViewPort from "#coffeebeanslabs/react-native-inviewport";
checkVideoVisible(isVideoVisible) {
this.setState({videoVisible: isVideoVisible});
}
<InViewPort onChange={(isVideoVisible) => this.checkVideoVisible(isVideoVisible)}>
<Video
paused={!this.state.videoVisible}
/>
</InViewPort>
Hint: Pastebin links have been inserted as shown up in my last comment
Hint: Solution of Muhammad still doesn't work(see a picture of the new tooltip)!
My layout file is coded like this:
<?php
use yii\helpers\Html;
use common\wsl_components\AdminLteAsset;
$js = <<<SCRIPT
$(function () {
$('body').tooltip({
selector: '[data-toggle="tooltip"]',
html:true
});
});
SCRIPT;
// Register tooltip/popover initialization javascript
$this->registerJs($js);
AdminLteAsset::register($this);
$this->beginPage()
?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head(); ?>
</head>
<body class="hold-transition skin-blue sidebar-mini sidebar-collapse">
<?php $this->beginBody(); ?>
<div class="wrapper">
<?=
$this->render(
'header.php'
);
?>
<?=
$this->render(
'left.php'
);
?>
<?=
$this->render(
'content.php', ['content' => $content]
);
?>
</div>
<?php $this->endBody(); ?>
</body>
</html>
<?php $this->endPage(); ?>
My GridView is coded like this:
[
'attribute' => $dummy ,
'label' => Yii::t ( 'app' , 'Charakterisierung' ) ,
'format' => 'html' ,
'value' => function($model) {
if ( !empty ( $model->person->personentypDominant->typ_name )) {
$tag = Html::tag ( 'span' , 'Tooltip-Touch Me!' , [
// html-tags won't be rendered in title
'title' => $model->person->personentypDominant->typ_empfehlung ,
'data-placement' => 'left' ,
'data-toggle'=>'tooltip',
'style' => 'white-space:pre;border:1px solid red;'
] );
return $tag . "<br>" . $model->person->personentypDominant->typ_verhaltensmerkmal_im_team_1 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_bei_stress_3 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_am_arbeitsplatz_4;
}
}
],
Nevertheless, HTML-Tags in Tooltip won't be rendered. They appear, as they are in database, for instance like this:
Verhaltensempfehlung:<br><ul><li>
Kompetenz und Selbstbewusstsein zeigen,</ul></li>
I don't know why, but upper tags won't be interpreted. They are in Tooltip hardcoded. Any ideas, what I do wrong?
Edit: My question having been answered by Muhammad is exactly same, but answer didn't solve my problem!
In order to show my problem, look at attachement,please!
You have 2 mistakes apparently
In this view you provided on the line 149 you are missing the attribute data-toggle="tooltip" on the spans.
change them to
$tag_rot = Html::tag(
'span', 'Typ Rot', [
'title' => $tooltip_rot,
'data-toggle' => 'tooltip',
'data-placement' => 'left',
'style' => 'white-space:pre;border:2px solid red;'
]
);
$tooltip_green = \common\modules\lookup\models\LPersonentyp::findOne(2)->typ_empfehlung;
$tag_green = Html::tag(
'span', 'Typ Grün', [
'title' => $tooltip_green,
'data-toggle' => 'tooltip',
'data-placement' => 'left',
'style' => 'white-space:pre;border:2px solid green;'
]
);
$tooltip_blue = \common\modules\lookup\models\LPersonentyp::findOne(3)->typ_empfehlung;
$tag_blue = Html::tag(
'span', 'Typ Blau', [
'title' => $tooltip_blue,
'data-toggle' => 'tooltip',
'data-placement' => 'left',
'style' => 'white-space:pre;border:2px solid blue;'
]
);
In your Gridview column you are using "format"=>"html" whereas you should be using "format"=>"raw"
change the column definition to the following
[
'attribute' => $dummy ,
'label' => Yii::t ( 'app' , 'Charakterisierung' ) ,
'format' => 'raw' ,
'value' => function($model) {
if ( !empty ( $model->person->personentypDominant->typ_name ) ) {
$tag = Html::tag ( 'span' , 'Tooltip-Touch Me!' , [
'title' => $model->person->personentypDominant->typ_empfehlung ,
'data-placement' => 'left' ,
'data-toggle' => 'tooltip' ,
'style' => 'white-space:pre;border:1px solid red;'
] );
return $tag . "<br>" . $model->person->personentypDominant->typ_verhaltensmerkmal_im_team_1 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_bei_stress_3 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_am_arbeitsplatz_4;
}
}
] ,
The ANSWER i gave previously was more focused towards the tooltip usage with the html::tag() and i used your code for gridview column to copy paste, and forgot to mention it there in case of using inside the gridview, i have updated that answer too.
In case if you still could not achieve a view of HTML inside the tooltip after #Muhammad Omer Aslam's answer.
Try to add 'data-html' => 'true' or with js way $(selector).tooltip({html: true}) NOTE: based on bootstrap official documentation Use text if you're worried about XSS attacks.
Check if you do not include a jquery-ui tooltip widget. Which will overwrite bootstrap's tooltip.
To Fix it add a script like :
$(selector).tooltip({
content: function () {
return this.getAttribute("title");
},
});
In this link you can find other ways fix jQeuer-UI tooltip
Be warned that Bootstrap 4.3.1 and 3.4.1 now comes with an HTML sanitizer and a most of tags are now suppressed by default.
Here the bootstrap blog annuncement and the docs for 3.4.1.
So now you need to whitelist any other tag inside your tooltip (or popover) HTML
var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList
// To allow table elements
myDefaultWhiteList.table = []
// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']
// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)
// initialize your tooltip
$(function () {
$('[data-toggle="tooltip"]').tooltip({
// set your custom whitelist
whiteList: myDefaultWhiteList
});
});
i am using Yii2 with a scroll pager extension: http://kop.github.io/yii2-scroll-pager/
However, when you set the scroll for a div, instead of the whole screen, ajax is not loading any additional items when you scroll down.
Here's my code:
echo ListView::widget([
'dataProvider' => $newsDataProvider,
'itemOptions' => ['class' => 'item'],
'itemView' => '_news_item_view',
'pager' => [
'class' => \kop\y2sp\ScrollPager::className(),
'negativeMargin' => '200',
'triggerText' => 'Load More news',
'triggerOffset' => 3,
'noneLeftText' => '',
],
'summary' => '',
]);
But this is not working. You can see it live mode here: http://188.226.170.133/ on the div with id = w0
here's css i've added to make the scroll happen only on this div:
#w0 {
height: 600px;
overflow-y: scroll;
}
Any suggestions?
I have a yii application and I use themes to manage different styles and layouts. In the default generated contact.php I use the following code to generate a captcha verification for the form:
//webroot/themes/botany/views/site/contact.php
<?php //echo $form->labelEx($model,'verifyCode'); ?>
<div>
<?php $this->widget('CCaptcha', array('showRefreshButton' => true,
'buttonLabel' => 'Refresh',
'buttonOptions' => '',
'buttonType' => 'button',
'clickableImage' => true));
?>
<?php echo $form->textField($model,'verifyCode', array('class' => 'form-control', 'placeholder' => 'Captcha*')); ?>
</div>
<p>Please enter the letters as they are shown in the image above.
<br/>Letters are not case-sensitive.</p>
<?php echo $form->error($model,'verifyCode'); ?>
<?php endif; ?>
Although, I have set showRefreshButton => true I could not able to see the refresh button. The following screen shot demonstrates the absence of refresh button:
After some inspection, I found, what I think, a bug in Yii, in which, different widgets generate HTML elements with the same id.
In my case zii.widgets.CMenu widgets in webroot/themes/botany/views/layouts/main.php generates the same id for the ul of the navigation menu and the Captcha widget image regarded id by the generated jquery by the captcha widget.
I could able to solve this issue by supplying the id option of CMenu
<?php $this->widget('zii.widgets.CMenu',array(
'id' => 'gds',
'htmlOptions' => array('class' => 'nav'),
'items'=>array(
array('label'=>'Home', 'url'=>array('/site/index')),
array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
array('label'=>'Contact', 'url'=>array('/site/contact')),
array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
),
)); ?>
and setting yw0 id for the captcha image.
<?php $this->widget('CCaptcha', array('imageOptions' => array('id' => 'yw0'),'showRefreshButton' => true,'buttonLabel' => 'Refresh', 'buttonOptions' => '', 'buttonType' => 'button')); ?>
What type of render function did you use? If you are using renderPartial, it won't show the refresh button. The easy way is create a new blank layout and use render()
http://www.dukaweb.net/2013/12/why-does-yii-captcha-not-display-get.html