Question

我在我们的网站上有以下代码来播放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);

我的麻烦是，视频播放器播放按钮不起作用。播放视频但播放视频时只显示海报图片。我该如何解决这个问题请尽量帮助我..

Answer 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>

Answer 2

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

Example

Karthikeyan Siva

海报图像点击播放视频，但播放器播放按钮不起作用

2 个答案: