海报图片点击播放视频但播放器播放按钮不起作用答案

【问题标题】：Poster image click play the video but player play button not work海报图片点击播放视频但播放器播放按钮不起作用
【发布时间】：2023-03-09 00:27:02
【问题描述】：

我在我们的网站上有以下代码来播放 HTML5 视频，它可以在所有浏览器中完美播放。这是我的html代码

    <video id="video_1" onclick="this.play();" class="video-js vjs-default-skin" controls preload="" width="100%" height="100%"
          poster="<?php echo get_field('video_image');?>">
        <source src="<?php echo get_field('video_url_mp4');?>" type='video/mp4'/>
        <source src="<?php echo get_field('video_url_webm');?>" type='video/webm'/>
        <source src="<?php echo get_field('video_url_ogg');?>" type='video/ogg' />
        <source src="<?php echo get_field('video_url_flv');?>" type='video/flv' />
    </video>

这是我的脚本代码

var video = document.getElementById('video_1');video.addEventListener('click',function(){video.play();},false);

我的问题是，视频播放器播放按钮不起作用。播放视频时，它只播放视频海报图像点击。我该如何解决这个问题，请尝试帮助我..

【问题讨论】：

标签： javascript jquery wordpress html5-video video.js

【解决方案1】：

html:-

<div id="video_cotainer">
    <video id="video_1" class="video-js vjs-default-skin" controls="controls" preload="none" width="100%" height="100%" poster="<?php echo get_field('video_image');?>">
            <source src="<?php echo get_field('video_url_mp4');?>" type='video/mp4'/>
            <source src="<?php echo get_field('video_url_webm');?>" type='video/webm'/>
            <source src="<?php echo get_field('video_url_ogg');?>" type='video/ogg' />
            <source src="<?php echo get_field('video_url_flv');?>" type='video/flv' />
    </video>
</div>

脚本：-

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    jQuery(document).ready(function($){
        $('#video_cotainer').click( function(){
            $('#video_1').get(0).play();
            $('#video_cotainer').unbind('click');
        });
    });
</script>

【讨论】：

【解决方案2】：

你已经用过视频控件了，那你为什么要使用 JavaScript，那个视频标签控件属性是播放/暂停视频的原生属性。

Example

Karthikeyan 湿婆

【讨论】：