video播放与暂停方法

在html5中，视频会被越来越用到。flash，2020年底，谷歌就要淘汰了，以后就是video的天下了，哈哈。

这里简单介绍一下，平时常用的video,几个方法，属性。

<video class="videoSrc" width="794" height="446
"src="video/impressionen_2019_1min_FINAL.mp4" 
id="wyn">
     您的浏览器不支持 video 标签。
</video>

<div  id="control">
      <img src="images/play.png" />
</div>

1. controls

controls 属性是一个 boolean(布尔) 属性。controls 属性规定浏览器应该为视频提供播放控件。

• 播放
• 暂停
• 定位
• 音量
• 全屏切换
• 字幕（如果可用）
• 音轨（如果可用）

2. play(); 实现播放   

3. pause();实现暂停

下面我们要对上面的video实现点击按钮播放，并添加控件属性

js对象：

const wyn = document.querySelector("#wyn");

const control_play = document.querySelector("#control");

control_play.onclick = function () {

wyn.play()

this.style.display="none";

wyn.controls="controls";

};

那你要用jq了，就需要先把jq对象换成js对象，这就用到 get（0）了

$("#control").click(function(){

$(this).hide();

console.log($("#wyn"));

$("#wyn").get(0).controls="controls";

$("#wyn").get(0).play();

});

或者也可以这样,用【】

$("#control").click(function(){

$(this).hide();

console.log($("#wyn"));

$("#wyn")[0].controls="controls";

$("#wyn")[0].play();

});

注意：这里就要提到js对象和jq对象的差别了

1.jQuery对象属于js的数组；
2.jQuery对象是通过jQuery包装的DOM对象后产生的;
3.jQuery对象不能使用DOM对象的方法和属性

4.DOM对象不能使用jQuery对象的方法和属性

打印一下$("#xyn")看一下，你就会发现，jq对象，是包含很多对象属性的数组