js怎么取QueryString并赋值给video的src属性

js怎么取QueryString并赋值给video的src属性,第1张

假设你用的是ASP或者ASP.NET,可以在ASP页面里,直接通过服务器代码获取QueryString的值,传递给JS变量。其他方法类似

   <video  id="video"></video>

    <script>

        var url='<%=Request["videourl"] %>'

        document.getElementById("video").src = url

    </script>

这样肯定不行的,jQuery只是 *** 作了DOM的属性,虽然为标签成功加上了autoplay属性,但视频框架早已经加载完成了,后加上的autoplay属性对其没有作用。应使用HTML5 Video自带的API来控制视频播放,下面的例子实现了鼠标悬停到视频上方自动播放,鼠标移出后自动暂停的效果:

$(function(){

var video = $('video.wp-video-shortcode')

video.hover(function(){

video[0].play() // play() 和 pause() 是HTML5中video自带的API函数,哈哈,方便吧?

},function(){

video[0].pause()

})

})

1、首先需要新建一个html文件,命名为test.html,用于介绍如何使用JS控制video视频的src。

2、在test.html页面,使用button标签创建四个按钮,分别是播放/暂停、大、中、小,用于控制视频的播放效果。同时,使用video标签创建一个视频。

3、给每个按钮绑定onclick点击事件,当按钮被点击时,分别执行相应的函数来控制视频的播放效果。

4、使用document.getElementById()获得视频对象,创建“播放/暂停”的playPause()函数,使用play()方法控制视频的播放,使用pause()控制视频的暂停。

5、创建makeBig()函数,当点击"大"按钮时,使视频以宽度560px来播放视频。

6、创建makeNormal()函数与makeSmall()函数,当点击“中”按钮时,使视频以宽度420px来播放视频,当点击“小”按钮时,使视频以宽度320px来播放视频。

7、在浏览器打开test.html文件,测试js控制视频播放的效果无误。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11933804.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存