如何激活onclick上的视频说明？(How do I make video description active onclick?)

 我有一堆视频，想知道在播放视频时如何激活描述？  
 我已经能够添加悬停状态，但在播放该视频时它不会保留金色。  
           <iframe id="vid_frame4" class="active" src="https://www.youtube.com/embed/cEQeHCG70Bw?enablejsapi=1&version=3&playerapiid=ytplayer&rel=0" frameborder="0" width="454" height="255" allowscriptaccess="always" allowfullscreen></iframe>


            <div class="vid-item" onClick="document.getElementById('vid_frame4').src='http://youtube.com/embed/cEQeHCG70Bw?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=1&rel=0&autohide=1'" allowscriptaccess="always">
              <div class="thumb"><img src="http://img.youtube.com/vi/cEQeHCG70Bw/2.jpg"></div>
              <div class="desc active" onClick=".addClass(active)">Directions for Use</div>
            </div>

            <div class="vid-item" onClick="document.getElementById('vid_frame4').src='http://youtube.com/embed/dPxKQ7uh6xg?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=1&rel=0&autohide=1'" allowscriptaccess="always">
              <div class="thumb"><img src="http://img.youtube.com/vi/dPxKQ7uh6xg/2.jpg"></div>
              <div class="desc">Cup Size Programming</div>
            </div>

   .vid-item {
        width: 212px;
        height: 119px;
        float: left;
        margin: 15px 30px 0px 0;
        padding: 0px;
    }

    .thumb {
        /*position: relative;*/
        overflow:hidden;
        height: 100px;
    }

    .thumb img {
        width: 100%;
        position: relative;
        top: -20px;
    }

    .vid-item .desc {
        color: #000000;
        margin-top:5px;
        height:30px;
        float:left;
        text-align:left;
    }

    .vid-item .desc:hover, .vid-item .desc:active {
        color: #c79b4c;
        margin-top:5px;
        height:30px;
        float:left;
        text-align:left;
    }

    .vid-item:hover {
        cursor: pointer;
    }
 
 这是js小提琴： https ： //jsfiddle.net/designstreet1/awbyf1h5/  
 任何帮助将非常感谢 

I have a bunch of videos and wanted to know how to make the description active when that video is playing? 
I have been able to add a hover state but it doesn't stay gold when that video is playing. 
           <iframe id="vid_frame4" class="active" src="https://www.youtube.com/embed/cEQeHCG70Bw?enablejsapi=1&version=3&playerapiid=ytplayer&rel=0" frameborder="0" width="454" height="255" allowscriptaccess="always" allowfullscreen></iframe>


            <div class="vid-item" onClick="document.getElementById('vid_frame4').src='http://youtube.com/embed/cEQeHCG70Bw?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=1&rel=0&autohide=1'" allowscriptaccess="always">
              <div class="thumb"><img src="http://img.youtube.com/vi/cEQeHCG70Bw/2.jpg"></div>
              <div class="desc active" onClick=".addClass(active)">Directions for Use</div>
            </div>

            <div class="vid-item" onClick="document.getElementById('vid_frame4').src='http://youtube.com/embed/dPxKQ7uh6xg?enablejsapi=1&version=3&playerapiid=ytplayer&autoplay=1&rel=0&autohide=1'" allowscriptaccess="always">
              <div class="thumb"><img src="http://img.youtube.com/vi/dPxKQ7uh6xg/2.jpg"></div>
              <div class="desc">Cup Size Programming</div>
            </div>

   .vid-item {
        width: 212px;
        height: 119px;
        float: left;
        margin: 15px 30px 0px 0;
        padding: 0px;
    }

    .thumb {
        /*position: relative;*/
        overflow:hidden;
        height: 100px;
    }

    .thumb img {
        width: 100%;
        position: relative;
        top: -20px;
    }

    .vid-item .desc {
        color: #000000;
        margin-top:5px;
        height:30px;
        float:left;
        text-align:left;
    }

    .vid-item .desc:hover, .vid-item .desc:active {
        color: #c79b4c;
        margin-top:5px;
        height:30px;
        float:left;
        text-align:left;
    }

    .vid-item:hover {
        cursor: pointer;
    }
 
Here's the js fiddle: https://jsfiddle.net/designstreet1/awbyf1h5/ 
Any help would be very much appreciated

原文：https://stackoverflow.com/questions/33112787

2024-04-22 13:04

满意答案

 
  通过运行命令创建迁移 ：  
 
php artisan make:migration users_disabled_column
 
 其中disabled是要添加到现有表的列的名称。  
 
  使用添加列编辑新迁移，以下是示例：  
 
<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class UsersDisabledColumn extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function($table) {
            $table->boolean('disabled')->default(false);
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function($table) {
            $table->dropColumn('disabled');
        });
    }
}
 
 
  执行创建的迁移：  
 
 php artisan migrate  
 
  现在您可以使用新列：  
 
$user = User::find($id);
$user->disabled = false;
$user->save();

 
 Create migration by running command: 
 
php artisan make:migration users_disabled_column
 
where disabled is name of column you want to add to existed table. 
 
 Edit new migration with adding column, here is example: 
 
<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class UsersDisabledColumn extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function($table) {
            $table->boolean('disabled')->default(false);
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function($table) {
            $table->dropColumn('disabled');
        });
    }
}
 
 
 Execute created migration: 
 
php artisan migrate 
 
 Now you can use new column: 
 
$user = User::find($id);
$user->disabled = false;
$user->save();

Laravel：使用Eloquent ORM的N到N（mysql）关系(Laravel: N to N (mysql) relation using Eloquent ORM)

我刚刚加入stackoverflow，所以我没有足够的信用评论所以我会在这里留下一个asnwer。首先请更正您的关系定义。在用户模型中:(你这里有错误） public function countries(){ return $this->belongsToMany(Country::class); } 在您的国家模型中： public function users(){ return $this->belongsToMany(User::class); } 第二，你需要使...

Laravel 5.2 Eloquent ORM hasManyThrough(Laravel 5.2 Eloquent ORM hasManyThrough)

不。你的hasManyThrough通气很好，但是当你调用profile_images方法时它会返回QueryBuilder实例。要获取相关模型的集合，请使用get方法 $images = $user->profile_images()->get(); 或者只是使用laravel的“魔法” $images = $user->profile_images; No. Your hasManyThrough ralation are fine, but when you call profile_...

全球包括User Eloquent模型(Globally include User Eloquent model)

将您的Eloquent模型添加到config/app.php的aliases列表中。例如， 'User' => 'App\User'将使您的用户模型可用作\User到处。 Add your Eloquent models to the aliases list in config/app.php. For example, 'User' => 'App\User' will make your User model available as \User everywhere.

超薄框架和雄辩的ORM(Slim Framework and Eloquent ORM)

您可以使用Composer自动包含项目中的类。假设您的composer.json文件存在于app 。然后，您可以使用classmap中的classmap属性自动包含models所有类： ... "require": { "php" : ">=5.4.0", "slim/slim" : "2.*", "illuminate/database" : "5.0.33", ... }, "autoload": { "classmap" : [ "...

Laravel Eloquent ORM - 嵌套语句(Laravel Eloquent ORM - Nested with statements)

Eloquent允许你轻松地做到这一点:) https://laravel.com/docs/5.2/eloquent-relationships#eager-loading 如果您还需要与每个日志相关的用户，您只需要像这样急切加载它 $sites = Site::with('log.user')->get(); Eloquent allows you to do that easily :) https://laravel.com/docs/5.2/eloquent-relationships#...

雄辩的ORM和EAV(Eloquent ORM and EAV)

有一些方法可以解决这个问题（正如我通过其他论坛帖子发现的那样）：为每个EAV组件创建一个模型，例如伪代码： class Object extends Eloquent{ public function objects(){ return $this->hasMany('Attribute'); } } class Attribute extends Eloquent{ public function attributes(){ retur...

如何使用Scope在Eloquent ORM中选择除（A和B）之外的所有行？(How to select all rows except (A and B) in Eloquent ORM using Scope?)

可以将范围与急切加载结合使用。像那样： User::with(['notifications' => function($q){ $q->friendship(); }])->get(); 但是我们现在需要以某种方式反转范围。我可以想出两种方法来解决这个问题。 1.添加负范围 public function scopeNotFriendship($query){ return $query->where('object_type', '!=', 'Friendship Req...

写下与Eloquent ORM / Laravel的很多关系(Write to hasMany relationship with Eloquent ORM/Laravel)

我真的不明白为什么你使用hasMany关系而不是belongsToMany 。实际上，您的数据库结构似乎已经被Laravel中的belongsToMany关系所利用。我的解决方案 user.php的 <?php class User extends Eloquent { public function roles() { return $this->belongsToMany('Role'); } protected $table = 'users'; pro...

向User Eloquent ORM模型添加字段(Adding fields to User Eloquent ORM model)

通过运行命令创建迁移： php artisan make:migration users_disabled_column 其中disabled是要添加到现有表的列的名称。使用添加列编辑新迁移，以下是示例： <?php use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class UsersDisabledColumn extends Migration { ...

将自定义Eloquent ORM模型添加到WHMCS版本6(Add custom Eloquent ORM models to WHMCS version 6)

您可能需要更新自动加载器。感谢您发布解决方案 - 其他人无疑会感激。 You may need to update your autoloaders. Thank you for posting the solution - others will no doubt appreciate it.

[How to] Make custom search with Nutch(v 1.0)?(转)

http://puretech.paawak.com/2009/04/29/how-to-make-c ...

我一点onclick为什么总是提交表单

下面是一个表单，有一个onclick按钮，点击后上面文本框的内容被添加到下面的文本域中，并可以一直添加 ...

HTML5 Video元素【HTML5教程 - 第三篇】

现代互联网中，我们大量的使用视频，在HTML5定义中提供了一个统一的方式来展示视频内容。浏览器支持首 ...

Hadoop的I/O

1. 数据完整性：任何语言对IO的操作都要保持其数据的完整性。Hadoop当然希望数据在存储和处理中不 ...

Who AM I Casting Crowns自我简介

基督教赞美诗歌 Hymns Lyrics MP3 中文版英文版中英对照音频提取（自动播放）： ...

HTML5 Video Doc【HTML5教程 - 第四篇】

HTML5 video元素也拥有方法，属性和事件。这里有播放，暂停和加载的相关方法，同时也拥有你可以操 ...

《Android视频教程》(Android Video Course)毕业答辩结束，俺胡汉三又回来了。太多邮件没有回复，抱歉。酝酿酝酿，继续录制视频，敬请期待[DVDRip]

中文名: Android视频教程英文名: Android Video Course 资源 ...

《尚学堂科技.高淇.JAVA300集视频教程13年7月20日更新》(java video courses)

中文名: 尚学堂科技.高淇.JAVA300集视频教程13年7月20日更新,加上马士兵之前的经典视频，真 ...

[转]Top 20 Programming Lessons I've Learned in 20 Years

This post could be viewed as hard lessons learned f ...

I18n的一个问题

升级了，2.2.2，用了I18n. 问题来了。以前model validation 出错的默认消 ...

python的访问器方法有哪些

使用方法： class A(object): def foo(self,x): #类实例方法 print "executing foo(%s,%s)"%(self,x) @classmethod def class_foo(cls,x): #类方法 print "executing class_foo(%s,%s)"%(cls,x) @staticmethod def static_foo(x): #静态方法 print "executing static_foo(%s)"%x调用方法： a =

使用Zend Framework 2中的JOIN sql检索数据(Retrieve data using JOIN sql in Zend Framework 2)

我认为你必须将两个TableGetway传递给UserTable构造。你必须改变Module.php看看： public function getServiceConfig() { return array( 'factories' => array( 'User\Model\UserTable' => function($sm) { $userTableGateway = $sm->get('UserTable

透明度错误IE11(Transparency bug IE11)

这是一个渲染错误，由使用透明度触发，使用bootstrap用于在聚焦控件周围放置蓝色光环的box-shadow属性。可以通过添加以下类覆盖来解决它。 .form-control:hover { -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,255,1); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,255,1); box-shadow: 0px 0px 4px 0px rgba(0,0,255,1)

linux的基本操作命令。。。

ls 显示目录 mkdir 建立目录 cd 进入目录

响应navi重叠h1和nav上的h1链接不起作用(Responsive navi overlaps h1 and navi links on h1 isn't working)

将z-index设置为.main-nav这将解决您的重叠问题 .main-nav { position:relative; z-index:9; } set z-index to .main-nav This will fix your overlaping issue .main-nav { position:relative; z-index:9; }

在C中读取文件：“r”和“a +”标志的不同行为(Reading a File in C: different behavior for “r” and “a+” flags)

这是因为模式规范"a"打开一个文件以便追加，文件指针在末尾。如果您尝试从此处读取，则由于文件指针位于EOF，因此没有数据。您应该打开"r+"进行阅读和写作。如果在写入之前读取整个文件，则在写入更多数据时，文件指针将正确定位以追加。如果这还不够，请探索ftell()和fseek()函数。 That is because the mode spec "a" opens a file for appending, with the file pointer at the end. If you

NFC提供什么样的带宽？(What Kind of Bandwidth does NFC Provide?)

支持空中接口的数据速率是一回事。在消除协议开销，等待eeprom写入以及所有需要时间的其他内容之后，您看到的数据速率是完全不同的故事。长话短说，从标签读取或进行对等传输时的实际数据速率峰值约为2.5千字节/秒。取决于具体的标签或对等技术，它可能比这慢很多。 The supported data-rates of the air-interface are one thing. The data-rate that you see after removing protocol overhe

元素上的盒子阴影行为(box-shadow behaviour on elements)

它看起来像只在Windows上的Chrome的错误。我在Google Canary （Chrome 63）中也进行了测试，问题依然存在，所以有可能它不会很快修复。这个问题是由overflow: auto引起的overflow: auto ，在你的情况下，它可以很容易地通过删除或设置为可见（默认）来解决。但是，将鼠标悬停在右侧（顶部和底部）时，会出现滚动条。一个解决方案可以设置overflow: hidden的身体，所以预期的结果是所需的。我想指出，这不是一个很好的解决方案，但我建议暂

Laravel检查是否存在记录(Laravel Checking If a Record Exists)

这取决于您是否要以后与用户合作，或仅检查是否存在。如果要使用用户对象（如果存在）： $user = User::where('email', '=', Input::get('email'))->first(); if ($user === null) { // user doesn't exist } 如果你只想检查 if (User::where('email', '=', Input::get('email'))->count() > 0) { // user found

设置base64图像的大小javascript - angularjs(set size of a base64 image javascript - angularjs)

$scope.getData= function () { var reader = new FileReader(); reader.onload = $('input[type=file]')[0].files; var img = new Image(); img.src =(reader.onload[0].result); img.onload = function() { if(this.width > 640